Discussion :

[nico341]

Bonjour, j'essai de rendre compatible une page web avec ie6, ie7 et forefox, mais j'ai un souci avec ie6:

J'ai 3 div les une sur les autres.
A chacunes, j'ai attribué un fond different.
Dans ma CSS, j'ai donc mis un background-image, et étant une div avec une hauteur fixe, j'ai rajouté un height avec ma hauteur shouaité.
J'ai donc par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div>
  <div class="fond1"></div>
  <div class="fond2"></div>
  <div class="fond3></div>
</div>

et dans ma css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div.fond1 {width:200px; height:15px; background-image:url("/fond1.jpg");}
div.fond2 {width:200px; height:50px; background-image:url("/fond2.jpg");}
div.fond3 {width:200px; height:17px; background-image:url("/fond3.jpg");}

donc par exemple mon fond1.jpg fait bien en dimension 200X15, mais ie6 fait comme si j'avais mis un height:17px.
Quelqu'un sait-il comment je peux corriger ca??

[Er3van]

Pour être sûr, c'est ton image qui fait 200*15 ou c'est sous FF que ton div faire 200*15 ?

Autrement dit, qu'elle est la taille de ton image.

Pas pur hasard, t'aurais pas des div flottant ? Si c'est le cas ça doit faire ce même "bug" sur tous, et donc il te suffit de rajoute un "margin-top:-2px ;"

[Candygirl]

IE6 donne par défaut la hauteur du line-height à un élément. Le moyen le plus simple de résoudre le problème est d'ajouter un overflow:hidden sur l'élément incriminé.

[nico341]

C'est mon image qui fait 200*15.
Ok j'ai testé l'overflow je garder cette solution qui me semble être la seule pour résoudre ce problème.
Merci à vous