Soucis de puce/css safari

Bonsoir a tous;
j'ai un soucis avec safari : en effet, sous firefox et IE; j'ai un affichage correct de mes puces.

Sous safari, celles ci sont décalées, et je ne comprends pas pourquoi :



Pouvez-vous m'indiquer ce qui semble clocher ?

Merci d'avance pour votre aide
Modifié par amarcil (19 Aug 2010 - 23:20)

Salut,

il faudrait commencer par ne pas enregistrer tes pages en utf8 avec BOM.

Ensuite il faudrait corriger les erreurs de validation.

Après il sera temps de se reposer la question si le problème persiste.

Alors voila j'ai corrigé ma page, et malgrè ceci, je ne comprends pas pourquoi sous safari, je n'ai pas l'alignement de mes puces ...

Une piste pour m'aider ?

Merci

amarcil a écrit :
Une piste pour m'aider ?

Finir de corriger ta page en ne mettant pas un élément UL (qui est justement celui qui pose problème) dans un élément de type en ligne (actuellement SPAN) mais dans un élément de type bloc (tel que DIV).

j'ai mis un div, mais ça ne change pas le problème...

Ma page est valide pourtant...

amarcil a écrit :
j'ai mis un div, mais ça ne change pas le problème...

Non mais ça aurait pu suffire.

Donc en regardant de plus près :
* où sont passés les liens de ton menu ?
* quel est l'intérêt des SPAN ?
* pourquoi les avoir positionnés en absolu ?

Je pense que ça ira plus vite en te basant sur le tuto Créer des menus simples en CSS.

l'intérêt des spans était de faire aligner le texte verticalement....

car la j'ai viré les spans, mais je n'ai plus mon texte verticalement aligné par rapport à la puce de l'image...

(les liens allaient arriver, ce n'est qu'un site en cours de dév )

Voila une petite piste pour l'alignement vertical du texte sans décaler les puces ?
Modifié par amarcil (18 Aug 2010 - 22:44)

amarcil a écrit :
une petite piste pour l'alignement vertical du texte sans décaler les puces ?

Yep !

Déjà il est plus facile d'utiliser background que list-style-image (trop limité). Ensuite c'est tout simple : il suffit de mettre le lien en display:block pour qu'il prenne toute la place disponible et de lui affecter un padding-top et un padding-bottom de même valeur pour centrer le texte.

Un petit exemple :

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
}
li {
	padding-left: 45px;
	background: #fff url(http://www.ledressingdemelinda.fr/public/images/hot_price.png) no-repeat left center;
}
a {
	display: block;
	text-decoration: none;
	padding: 4px 6px;
}

<ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Déposer une annonce</a></li>
	<li><a href="#">Offres</a></li>
</ul>

Merci pour ces explications