+ Par Dyonisos, j'ai omis de mentionner dans quel mode j'étais : en mode Strict. Merci de l'avoir signalé.
Aie aie aie, les listes quelle galère à gérer avec CSS. Pour voir un peu comment les éléments ul et li se comportent dans les navigaters de versions 5+, j'ai décidé de faire un premier test avec des styles très simples. Comme les éléments ul et li sont des éléments créants des boîtes de type bloc, j'ai choisi de leur donner une couleur de fond afin de voir comment les navigateurs les affichent. li est contenu dans ul donc la valeur qu'on lui affecte en width est relative à celle de son conteneur, ici 90% de ul. Voici les styles utilisés :
body { background-color: #e5e5e5; margin: 0; padding: 0; }
ul { background-color: #c03; width: 60%; }
li { background-color: #fff; width: 90%; }et un code très simple :
<body>
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
</ul>
</body>Ci dessous quelques résultats :
Alors heureux(se) ? Moi pas trop là...
Mon but était d'essayer d'harmoniser le rendu des listes sous différents navigateurs.
Au final j'ai trouvé deux méthodes qui permettent d'avoir quelque chose de correct, mais je n'ai pas testé sous tous les navigateurs récents disponibles. Comme c'est chiant d'expliquer, voici les feuilles de styles utilisées :
Méthode 1 :
body { background-color: #e5e5e5; margin: 0; padding: 0; }
ul { background-color: #c03; margin: 0; padding-left: 50px; width: 60%; }
li { background-color: #fff; margin: 0px; padding: 0px; width: 90% }Ou en spécifiant pour ul un autre style pour les puces que celui par défaut, par exemple : list-style-type: circle;
Méthode 2 :
body { background-color: #e5e5e5; margin: 0; padding: 0; }
ul {
color: #000;
font-family: verdana;
background-color: #c03;
margin: 0;
padding: 0;
width: 60%;
}
li {
background-color: #fff;
background-image: url(li_fleche.gif);
background-repeat: no-repeat;
background-position: left center;
list-style-type: none;
margin: 0;
padding: 0 0 0 20px;
width: 90%;
}Ce qui donne ce résultat :
C'est déjà mieux, pas vrai ?
Joint