[RESOLU] Marge <li> dans IE

Bonjour

voici le pb : http://da-bulb.com/test/espace_list.html

On dirait que IE rajoute un padding gauche et droite à <ul> lorsque que l'on définit des marges aux éléments <li>.

Y a t-il une correction, c'est assez gênant pour positionner des menus.

merci
Modifié par bill_baroud (25 Jul 2006 - 15:57)

Suivant les navigateurs, les retraits des listes ul et ol sont générés soit par une marge, soit par un padding (de 2,5 em, il me semble). Pour harmoniser le tout, il faut spécifier les marges ET le padding.

merci pour ta réponse. J'avais effectivement lu ça avant de poster et j'ai initialisé margin et padding à 0. Après ça, l'affichage est identique sous IE et FX. Mais si j'ajoute une marge aux éléments <li>, un nouveau décalage apparait en début et fin de liste. C'est assez problématique !

Tu as peut-être lu ça : http://forum.alsacreations.com/faq/#item54
Est ce que tu pourrais préviser un peu ton problème en donnant
le code css et html correspondant ou mieux un lien?

le lien figure dans le premier post.

voici le code :

<ul>
<li>oooo</li>
<li>oooo</li>
<li>oooo</li>
</ul>

ul{
position:absolute;
top:100px;
left:200px;
border:1px solid black;
list-style-type:none;
padding:0;
margin:0;
}
li{
float:left;
width:50px;
background:#666666;
color:white;
margin-right:20px;
margin-left:20px;
}

A priori je pense que c'est le bug de rendu IE qui double les marges
latérales quand elles s'appliquent à un élément flottant.

Solution:
Ajoute une display:inline à tes <li>. Celui-ci n'a aucune incidence
sur la valeur calculée du display à block puisque le display associé à un
élément flottant est ignoré (excepté la valeur none)


Explications:
voir http://www.positioniseverything.net/explorer/doubled-margin.html
Modifié par Hermann (25 Jul 2006 - 15:41)

C'est bien ça, merci bcp !
Par contre l'explication est assez obscure...mais bon, pas grave, ça faisait un moment que je me trimballais ce pb.

Oui d'accord je t'accord que c'est pas très clair pour le non initié.
En fait l'applicaton d'un float left ou right fait passer le display à block.