Accueil > weblog
- Lire le billet précédent - Lire le billet suivant -
Gérer l'espace à gauche d'une liste selon les navigateurs
Par Laurent Denis, le 19 septembre 2004.
Tout a été dit par Eric Meyer il y a longtemps dans Consistent List Indentation sur ce problème de marge gauche des listes sur lequel buttent de nombreux webmestres. Pour créer l'espace nécessaire aux puces d'une liste ordonnée ou non, les navigateurs n'ont pas tous adoptés la même méthode :
- Les navigateurs basés sur Gecko (FireFox, Mozilla) appliquent par défaut un
padding-leftde 40px à l'élémentul, et y placent la puce
- Tandis qu'IE et Opera se servent d'un
margin-leftde 40px
Quand on modifie uniquement soit la marge, soit le remplissage 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.
Trackbacks
Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.
Commentaires
[ NikO ], le 20 septembre 2004
Bonjour
Il m'arrive même parfois, pour ne pas me prendre le choux et devoir tout restyler proprement de mettre :
* {margin:0;padding}
à noter un bug important avec les li, les a {display:block} et ie
niko.informatif.org/demo/...
David Duret, le 20 septembre 2004
Et qu'en est-il d'une image en float:left juste avant une liste ? Bonjour les problèmes... Avec Mozilla/Firefox, tout se passe comme prévu mais avec IE, les puces passent _sous_ l'image, grrr.
[ NikO ], le 21 septembre 2004
Même avec ul {float:none;clear:both;} ?
David Duret, le 24 septembre 2004
Niko > non, ça ne fonctionne pas... le clear:both; fait que ma liste passe sous l'image... j'ai du utilisé un hack pour mettre un margin-left de plus de la largeur de l'image sous IE :'(
Pour info, vous pouvez aussi faire attention aux marges verticales : Mozilla/Firefox ont l'air d'avoir un margin-top:10px; que n'a pas IE...
Laurent Denis, le 25 septembre 2004
@David Duret> J'aurais dû mentionner aussi cette propriété dans mon billet : utilise simplement un
liste-style-position: insidesur leulpour forcer la puce à se placer dans la boîte bloc principale de la liste.Ensuite, pour gérer l'espacement de l'image et des puces, annule le
margin-leftet lepadding-leftde la liste, et joue sur lemargin-rightde l'image.Batiste Bieler, le 25 septembre 2004
[ NikO ] > j'avais trouvé une solution au bug des liens en display:block avec les listes.
css.maxdesign.com.au/list...
Sanosuke85, le 11 mars 2006
@Laurent Denis -> liste-style-position: inside
En fait c'est list-style-position (je préfère donner la précision) sinon ça marche bien oui ; ça vire le soucis de décalage des balises entre IE et FF
Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.