Discussion :

[creatchy]

Bonjour à tous,
J'ai un souci apparemment récurrent au vu des posts à ce sujet sur le forum.
ça concerne les listes à puces.

J'utilise une image en guise de puce. Pour l'affichage dans Firefox, no problem.
Par contre (et j'en vois déjà certains qui sourient ), dans IE7, les puces sont collées au texte et légèrement décalées sur la droite.

Voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
	<ul>
	<li>Info1</li>
	<li>Info2</li>
	</ul>

Et pour le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
ul{
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
color:#333;
list-style-type: none;
list-style-image: url(images/fleche.gif);
list-style-position: inside;
font-size : 11px;
font-family : Tahoma,Verdana,Arial;
color:#333;
}

Si je passe en position 'outside', l'affichage est similaire dans IE7 et Firefox.
Existe-t-il une solution pour remédier à ce problème ?
Merci pour votre aide.

[MasterOfChakhaL]

Salut,

As-tu essayé de définir le padding-left de tes ul ou le margin-left de tes li ?

[creatchy]

oui, mais ça ne change rien.
Dans IE7, la puce est collée au texte et le tout est légèrement décalé sur la droite.

Sur Firefox, la liste est affichée proprement.

[creatchy]

J'ai contourné le problème en utilisant un background-image à la place du list-type-image et en adaptant le padding-left.