28220 sujets

CSS et mise en forme, CSS3

[résolu] Images dans une liste : décalage de 5 pixels avec IE

Bonsoir,

Je galère un peu pour régler un problème de décalage avec IE, en mettant des images dans une liste :

HTML


<ul>
		  <li><img src="images/imagetest.png" width="183" height="36" /></li>
		  <li><img src="images/imagetest.png" width="183" height="36" /></li>
		  <li><img src="images/imagetest.png"  width="183" height="36" /></li>
		  <li><img src="images/imagetest.png"  width="183" height="36" /></li>
		  <li><img src="images/imagetest.png"  width="183" height="36" /></li>
	</ul>


CSS

ul{
	width:50%;
}
li{
	list-style-type:none; 
	background-color:#E4E4E4;
	border-bottom:1px solid #FFF;
	height:36px;
	line-height:36px;
}


Voilà ce que ça donne dans Firefox Smiley biggrin

upload/3208-firefox.png

Voilà ce que ça donne dans IE Smiley decu

upload/3208-ie.png

Comme vous pouvez le constater, j'ai un padding de 5px en bas de chaque élément de la liste, comment je peux régler ça ? Une idée ?

Merci pour vos réponses !

Eric
Modifié par EricLB (14 Dec 2005 - 21:34)
Pourquoi n'essaye tu pas de mettre le padding à 0, peut etre que IE le prendrais en compte et ne ferais pas cette erreur.
bonsoir,

je crois que cela vient du fait que IE interprete l'image comme un texte, donc il y integre un espace dessous.
La solution est de rajouter un " display: block; " dans ton css
Déjà fait...


padding:0;
margin:0;


ça ne change rien malheureusement...

UNe autre idée ?
J'avoue secher un peu là... Smiley murf
Je suis impatient de connaitre la réponse.
Modifié par 20cent (14 Dec 2005 - 21:44)
Philippe a écrit :
bonsoir,

je crois que cela vient du fait que IE interprete l'image comme un texte, donc il y integre un espace dessous.
La solution est de rajouter un " display: block; " dans ton css


Je viens d'essayer. Pas plus de succès, désolé.
euhhhh meme si tu rajoute dans ton css une balise img avec

img {display:block;}


car en mettant un display:block a ton " li " , c'est toute la ligne que tu transforme en bloc donc ça n'elimine pas le probleme de l'image
Oui, bien sur ! C'est bien ce que j'avais compris tout à l'heure...
Mettre l'image en display:block; et pas la balise "li" Smiley cligne
Modifié par EricLB (14 Dec 2005 - 22:07)
Oui, bien sur ! C'est bien ce que j'avais compris tout à l'heure...
Mettre l'image en display:block; et pas la balise "<li>" Smiley cligne
Modifié par EricLB (14 Dec 2005 - 22:07)
bon, vu que tu n'as pas d'exemple en ligne, on va essayer autre chose.

IE ne voudrait il pas que tu lui précise que tu ne veux pas de border à ton image par hazard

img {border:0;}


on ne sait jamais. ça + le display , ça devrait le faire.

sinon, je sais plus Smiley ohwell
Modérateur
bonjour,
essai d'ecrire ton html comme ceci:

<ul><li><img src="images/imagetest.png" width="183" height="36" /></li><li>
<img src="images/imagetest.png" width="183" height="36" /></li><li>
<img src="images/imagetest.png"  width="183" height="36" /></li><li>
<img src="images/imagetest.png"  width="183" height="36" /></li><li>
<img src="images/imagetest.png"  width="183" height="36" /></li>
</ul>


c'est encore un bug ou une particularité de IE. arf !
a plus

Edit Oups, un peu rapide, cette marge supplementaire de 3 px ne semble pas interferer ici !
alors, reprenons le probleme qu'au niveau des images et demandons a IE de d'appliquer le css suivant (enfin, la soluce ) 
img {vertical-align:top;}

Fin - edit .
Modifié par gcyrillus (14 Dec 2005 - 23:00)
a écrit :
Edit Oups, un peu rapide, cette marge supplementaire de 3 px ne semble pas interferer ici !
alors, reprenons le probleme qu'au niveau des images et demandons a IE de d'appliquer le css suivant (enfin, la soluce )

img {vertical-align:top;}


Fin - edit .


YES !!! Smiley biggrin Ca marche !

Et bien en voilà un de résolu.

Merci pour l'info.
Modifié par EricLB (14 Dec 2005 - 23:05)
Sujet clos
Aller à