[Résolu]Création thème pour DOTCLEAR: petit probleme

Bonjour, je suis en train de creer un theme pour DOTCLEAR, tout va bien, a par a ce moment la, lorsque j'essaie de creer un cadre pour l'affichage des commentaires :
Le probleme est que l'afficahge sous IE et Firefox n'est pas le même, et que je n'arrive pas a faire que les 4bouts soit colle (j'y arrive pour les 2 plus hauts), les autre les resultats sont totalement differents entre IE et firefox.
Voici la CSS, par ordre d'apparitions des parties de la bulle:
#com_p {
background-image: url(img/com_t.png);
width:452px;
height:19px;
background-repeat: no-repeat;
}

#com_top {
background-image: url(img/com_top.png);
width:452px;
height:34px;
background-repeat: no-repeat;
}

#com_bg {
background-image: url(img/com_bg.png);
width:452px;
background-repeat: repeat-y;
}

#com_f {
background-image: url(img/com_f.png);
width:452px;
height:18px;
background-repeat: no-repeat;
}
Modifié par Ohara (09 Feb 2006 - 21:42)

Pourrais-tu mettre le code html correspondant à cette partie du template ?
A mon avis, il doit s'agir d'un problème de line-height ou de div vide dont les marges sont mal interprétées par IE...

Voila :
<div id="com_p"><p id="c<?php dcCommentID(); ?>" class="comment-info">
<span class="comment-number"><a href="#c<?php dcCommentID(); ?>"><?php echo $co_num; ?>.</a></span>
Le <?php dcCommentDate(); ?> &agrave;
<?php dcCommentTime(); ?>, par
<strong><?php dcCommentAuthor(); ?></strong></p></div>

<?php /* on affiche le commentaire */ ?>
<blockquote><div id="com_top"></div>
<div id="com_bg"><?php dcCommentContent(); ?></div>
<div id="com_f"></div>
</blockquote>

Essaye d'appliquer un line-height de 1px aux divs com_f et com_top complété par un font-size de 1px si celà ne suffit pas.

En fait, même si un div est vide, il se peut que IE interprète sa hauteur minimale en fonction de la police utilisée par défaut sur la page.

Vérifie aussi si tu n'as pas d'autres marges à ton div com_bg situées ailleurs que dans la CSS que tu nous a fourni.

Voila la feuille de style apres ajout des line-height et des margin-bottom:-12px, comme la CSS est la, tout les bloc se colle parfaitement sous Firefox, mais sous IE, elle se chevauche:
#com_p {
background-image: url(img/com_t.png);
width:452px;
height:19px;
background-repeat: no-repeat;
}

#com_top {
line-height: 1px;
background-image: url(img/com_top.png);
margin-left: -10px;
margin-bottom: -11px;
width:452px;
height:34px;
background-repeat: no-repeat;
}

#com_bg {
background-image: url(img/com_bg.png);
margin-left:-10px;
width:452px;
margin-bottom:-12px;
background-repeat: repeat-y;
}

#com_f {
line-height: 1px;
background-image: url(img/com_f.png);
margin-left:-10px;
width:452px;
height:18px;
background-repeat: no-repeat;
}
Modifié par Ohara (09 Feb 2006 - 21:01)

Pourquoi avoir utilisé des marges négatives ? Il suffit normalement d'utiliser des margin nulles pour éviter tout décalage.

Au pire, essaye de positionner tes backgrounds suivant les divs (bottom pour le premier, top pour le dernier) histoire de gagner quelques pixels, sait-on jamais, même si normalement il n'y a pas lieu de faire celà...

Marche pas quand meme :s, c'est chiant ces truc quand ca arrive

Bonjour Ohara

Est-ce que tu pourrais conformément aux règles du forum, formater ton code à l'aide du BBCode [ code][/code ] (sans les espaces) ?

Merci.

#com_p {
background-image: url(img/com_t.png);
width:452px;
height:19px;
background-repeat: no-repeat;
}

#com_top {
line-height: 1px;
background-image: url(img/com_top.png);
margin-left: -10px;
margin-bottom: -11px;
width:452px;
height:34px;
background-repeat: no-repeat;
}

#com_bg {
background-image: url(img/com_bg.png);
margin-left:-10px;
width:452px;
margin-bottom:-12px;
background-repeat: repeat-y;
}

#com_f {
line-height: 1px;
background-image: url(img/com_f.png);
margin-left:-10px;
width:452px;
height:18px;
background-repeat: no-repeat;
} 

Donc : supprime tes marges négatives, celà ne t'apportera rien ici.

Et en affectant un padding-top et padding-bottom au com_bg ça donne quoi ?

Impec merci