[Résolu] Problème de compatibilité

Bonjour à tous,
... il s'agit encore d'un problème de compatibilité entre IE et Firefox, comme vous pouvez le voir sur cette image de comparaison (à gauche firefox, à droite IE). Sous IE les lignes sont plus épaisses que sous Firefox


Voici les codes en question :

<table class="clubtab">
  <tr><th width="25%">Auteur&nbsp;</th><th width="80%">Message</th></tr>
  <tr><td width="25%" class="clubrowlight clubforhg">Cityloisir&nbsp;</td><td width="80%" class="clubrowlight clubforhd" align="left"><span class="smalltext"><a name="1033"><img src="../club/img/icon_intrapost.gif" border="0" alt="" /> Post&eacute; le 28 Apr 2006 à 22:56</a><a name="lastpost"></a></span></td></tr>
  <tr><td width="25%" class="clubrowlight" align="left" valign="top">blabla</td><td width="80%" class="clubrowlight" align="left" valign="top"><div class="txtchro">blablabla</div></td></tr>
  <tr><td class="clubrowdark clubforsig"><a href="#top"><b>Haut de page</b></a></td><td class="clubrowdark clubforsig"><a href="club-membres-view-1-forum.html"><img src="../club/img/forums_profil.gif" border="0" hspace="5" alt="" /></a></td></tr>
  <tr><td class="clubsepar" colspan="2"></td></tr>
</table>

CSS :

.clubrowlight {
background-color : #e6edff; 
vertical-align : middle; 
border : 1px solid white;
}
.clubrowdark {
background-color : #d5e2ff; 
border : 1px solid white;
} 
.clubforsig {
height : 20px;
padding-left : 3px; 
}
.clubtab {
border : 0; 
margin : auto; 
width : 100%; 
border-collapse: collapse;
border-spacing: 1px;
} 
.clubtab th {
background : url(../../club/img/ap_contacts.gif) repeat; 
height : 22px; 
padding-left : 3px;
border : 1px solid white;  
color : #ffffff; 
font-weight : bold; 
}
.clubsepar {
background-color : #a2bbdf;
border : 1px solid white; 
height : 6px;
width : 100%;
} 
.smalltext {
font-size : 10px; 
color : #000000; 
} 

Le même problème se pose également au niveau des titres (ligne Auteur/ Message)
Pour voir ce que ça donne "en vrai" : voici la page http://www.cityloisir.com/home/club-forum-showt-497-1-2.html#lastpost

D'avance merci pour vos réponses.
Modifié par le_fleau (30 Apr 2006 - 15:43)

Hello le_fleau.

C'est moi ou il n'y a pas de différence. J'ai du louper un truc, mais où se situe le problème exactement ?

S'il s'agit des légères différences de hauteur observées entre certaines lignes du tableau contenant du texte et/ou des images, je vais être clair : on s'en fiche, non ?

Si tu ne t'en fiches pas, tu devrais

On le répète souvent sur ce forum, mais le design au pixel près n'existe pas… ou alors il faut faire du Flash (et encore !). Est-ce que c'est regrettable ? Ça dépend comment on se situe. Si on estime qu'une page web doit donner l'équivalent sur écran de la précision figée du print, effectivement, on n'aura JAMAIS ça, et on risque d'être frustré. Si on estime que des légères différences peuvent subsister, et qu'un certain nombre de ces différences ne sont pas des bugs mais des différences d'interprétation, ça va tout de suite beaucoup mieux.

Un conseil : prends l'habitude de faire des test avec plusieurs résolutions différentes (800×600, 1024×768, 1280×820, ou plus grand encore). Prends aussi l'habitude de tester plusieurs niveau de texte (avec Firefox, fait deux ou trois fois <ctrl><+>, c'est toujours instructif !).

Maintenant, pour le "problème" que tu as l'air de pointer, il faut peut-être chercher du côté des padding et/ou de la hauteur de ligne (line-height). Sache juste que tu n'auras jamais la même chose au pixel près entre deux navigateurs… et encore moins entre deux résolutions ou jeux de paramétrages de l'utilisateur, même pour un navigateur unique.

Bon courage.
Modifié par mpop (29 Apr 2006 - 22:22)

Merci !
J'ai remplacé height par line-height et miracle, la différence disparait !!! Merci beaucoup mpop