Les listes ordonnées (ol) et non-ordonnées (ul) ont un retrait à gauche. Par défaut, ce retrait est large de 40px et c'est dans cet espace que s'affichent les puces ou les numéros de la liste.
Mais, selon le navigateur concerné, ce retrait à gauche peuvent être dû à un margin-left ou à un padding-left.
-
Firefox et Opera appliquent par défaut un
padding-leftde 40px aux élémentsuletol. -
Tandis qu'IE se sert d'un
margin-leftde 40px.
Quand on modifie uniquement soit les marge, soit le padding d'une liste, on se retrouve donc avec un résultat différent selon les navigateurs.
Pour y remédier, il suffit de toujours spécifier à la fois les valeurs de margin et de padding pour les éléments ul et ol, en mettant l'un des deux à zéro et l'autre à la valeur d'espacement souhaitée.
Par exemple:
ul, ol {
margin: 1em 0 1em 24px;
padding: 0;
}