28173 sujets

CSS et mise en forme, CSS3

Bonjour.

J'ai un léger problème de mise en forme CSS qui m'agace.

Je tiens à préciser que je n'ai pas la possibilité de modifier le code (x)HTML, car il est généré automatiquement. J'ai juste la liberté de le personnaliser un (gros) chouilla, grâce à la mise en forme par CSS 2.1.

<ul>
  <li>Elément de liste 1</li>
  <li>Elément de liste 2</li>
</ul>


ul:before {
  content: "Elément de liste 0";
  display: list-item;
  list-style-image: url(http://nyctalope.troll.free.fr/ys.gif);
}

ul {
  list-style-image: url(http://nyctalope.troll.free.fr/ys.gif);
}


D'après les informations que j'ai trouvées, le pseudo-élément ':before' n'est pas supporté par IE. Pas grave, c'est juste un artifice cosmétique, rien de vraiment vital et ça ne remet pas en cause toute la mise en forme.

En revanche, là où je commence à perdre patience, c'est que le "display: list-item;" est censé être supporté par FireFox 1.5 ou supérieur et devrait permettre l'application d'un "list-style-image: ...", mais en pratique, rien à faire. Mon "ul:before" s'affiche sans puce, ce qui crée une discontinuité dans le style.

Rien d'absolument vital, encore une fois, mais je déteste buter sur un problème sans trouver de solution. Si quelqu'un a une explication et / ou une solution alternative, j'en serais ravi.
Bonjour,

Bon, ce n'est peut-être pas la réponse que tu attendais, mais tu as cette alternative qui devrait fonctionner:


ul {list-style:none;}

ul:before {content:"Elément de liste 0";}

ul:before, li {background:url(http://nyctalope.troll.free.fr/ys.gif) no-repeat 0 60%; padding-left:1.5em;}
Oui, ça marche. Mais j'avoue ne pas bien comprendre pourquoi le "display: list-item;", ou en tout cas le "list-style-image:..." appliqué à celui-ci, ne fonctionne pas dans mon ":before", même sous Firefox...

Bon, je vais me consoler en me disant que ça marchait sous Opera...