28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Y a-t-il une façon d'uniformiser ou de spécifier l'écart entre la puce et le texte dans une liste, de manière à ce que l'affichage soit identique sous IE et Firefox?

J'ai fait une recherche sur le forum, il est possible que je sois passée à côté de la réponse...
Si tu parles de la propriété list-style-image, il me semble que non.

Pour obtenir des puces partout pareil au pixel près (PPPPP) Smiley smile , il faut utiliser l'image en background.

.joliepuce {
	background: transparent url(images/puce.gif) 0 50% no-repeat;
	padding: 0 0 0 18px;
}

Modifié par Stephan (17 Jul 2005 - 04:15)
Salut Stephan,

C'était effectivement pour la propriété list-style-image.

Il s'agit d'un menu tout simple. S'il n'y a pas moyen de faire autrement avec la liste, je la laisserai probablement comme elle est présentement.
Ce n'est pas vraiment catastrophique et la seule façon de percevoir la différence, c'est de comparer l'affichage sur les deux navigateurs, ce que la majorité des internautes ne feront évidemment pas en consultant le site.

Malgré tout, ça m'agace un peu, perfectionnisme oblige!

Merci de m'avoir répondu.
Ce problème est différent de celui évoqué dans les liens cités par Raphaël, et n'a effectivement pas de solution actuellement dans CSS2.0 (ni dans CSS2.1) :

CSS2.0 a écrit :
Les propriétés de liste permettent de préciser le type (image, glyphe ou nombre) et la position d'une boîte de marqueur par rapport à la boîte principale (à l'extérieur, ou à l'intérieur avant le contenu). Par contre, celles-ci ne permettent pas de spécifier un style distinct (de couleur, de police, d'alignement, etc.) pour le marqueur de liste ou la position de celui-ci par rapport à la boîte principale.


La traduction n'est pas un prodige de clarté, mais il en ressort :
- qu'il est possible de préciser si la boîte de marqueur est à l'intérieur ou à l'extérieur de la boîte d'élément de liste (c'est la propriété list-style-position)
- mais qu'il n'est pas possible de préciser la distance entre la boîte de marqueur et cette boîte d'élément de liste.

CSS2.0 offrait en effet un autre mécanisme pour positionner précisément un marqueur par rapport à une liste : les marqueurs générés par display:marker et leur propriété marker-offset. Mais ce mécanisme n'a été implémenté que par Opera et a été supprimé de CSS2.1.

Le contournement habituel est :
- soit celui indiqué par Stephan,
- soit... un peu de Zen et de lâcher prise sur les détails de différences de rendu entre navigateurs, qu'il serait illusoire de vouloir éviter Smiley cligne
Modifié par Laurent Denis (17 Jul 2005 - 13:04)
Bonjour Raphael et Laurent Denis,

Merci beaucoup pour vos réponses.

À la suggestion de Laurent Denis, je vais essayer d'être un peu plus zen concernant cette question, d'autant plus qu'il devrait s'agir de la seule différence notable dans l'affichage du site.

Encore une fois, merci!
Modifié par elle (17 Jul 2005 - 16:15)