[Résolu] Problème de marge dans une liste sous IE 6

Bonjour à tous,

J'ai un petit soucis de marge, voici mon problème :
J'ai une liste avec 2 liens image dans les <li> :

<ul id="images">
			<li><a href="#"><img src="images/bijoux.gif"></a></li>
			<li><a href="#"><img src="images/perlesfant.gif"></a></li>
		</ul>

Le truc tout simple quoi ...
Voici le CSS de la partie en question :

div#menu ul#images * {
	padding:0;
	margin: 0;
	width: 135px;
	display: block;
	border: none;
	height: 31px;}

Une fois de plus, tout simple ...

Le résultat fonctionne très bien sous Safari, FF et les autres ... par contre, sous IE (le 6 en l'occurence), il y a environ 5 px qui séparent les deux images à l'écran ...

J'ai donc bidouillé avec des border pour visualiser la source du pb et lorsque je place un border sur l' <ul>, je me rend compte que j'ai 5px entre les deux images (ça je le savais déjà) mais aussi la même hauteur en dessous de la deuxième image à l'intérieur de l'<ul> ...

Si vous pouviez me donner des pistes ...

Comme j'ai créé une id pour ma liste le reste de mon CSS ne devrait pas influer sur cette partie ...

Merci d'avance
Modifié par telliouze (30 May 2006 - 15:00)

Salut telliouze,

Tout d'abord, j'ai un peu de mal à comprendre ton :

div#menu ul#images * {

En effet, l'utilisation du * qui est le sélecteur universel permet d'appliquer les propriétés qui suivent à tous les éléments du documents, hors ce n'est pas ce que tu veux...

Pourquoi ne pas plutôt mettre :

div#menu ul#images li {
padding:0;
margin: 0;
}

De cette manière, tu pourras corriger ton problème de décalage à la source.
Car si je ne dis pas de bétises, tous les navigateurs définissent par défaut un espacement entre chaque éléments d'une liste (élément li). Hors la valeur utilisée par IE n'est pas la même que celle utilisée par les autres navigateurs.

d'autre part les images ont une marge par default incorrigible si ce n'est avec la propriete a img { display:block; )

bonjour,

tu as probablement 2 "effets" de marges qui s'ajoute,

la marge basse par defaut de l'image, gerer comme du texte et qui laisse la possibilité d'afficher les jambes de la lettre "p" par exemple, j'en nomme pas une autre, ... cela se regle par un vertical-align:top; appliqué a "img".

Ensuite IE a la facheuse tendance a jouté une marge d'environ 3px entre chaque <li> que tu peut regler sans trucs css en accolant dans le xhtml les balises fermantes et ouvrantes de <li> ex:

<ul id="images">
<li><a href="#"><img src="images/bijoux.gif"></a></li><li>
     <a href="#"><img src="images/perlesfant.gif"></a></li>
		</ul>

++