28173 sujets

CSS et mise en forme, CSS3

BUG IE : list-style-image et float

Bonjour à tous, c'est mon premier post mais je suis un lecteur acidu. J'ai fait de nombreuses recherches, mais je n'ai rien trouvé de convaincant à mon problème. J'espère que vous saurez m'aider, car on le sait... L'union fait la force Smiley lol

Alors, voilà, je vous expose mon soucis : Je souhaiterais faire une liste horizontal à base de puce en images.

Lorsque l'on couple la propriété "list-style-image" et "float" sous IE, il semblerait que les images ne s'affichent pas.

Je vous donne un code simple pour illustrer le probleme.

<head>
<style type="text/css">
ul {
	list-style-image:url(img/pucefleche_grise.gif);
	list-style-position:inside;
}
ul li {
	float:left;
	margin-right:5px;
}
</style>
</head>

<body>
<ul>
	<li>Un test</li>
	<li>Un test</li>
	<li>Un test</li>
</ul>
</body>


Sous FF ca fonctionne parfaitement, mais sous IE...
Si on vient à enlever le "float:left", Hop les puces réapparaissent. J'ai testé avec un "display:inline" mais rien n'y fait.

Des solutions ? Merci de votre aide future (je l'espère Smiley ravi )

Certaines personnes d'autres fofo supposent que le bug pourrait être lié au "Bug de la guillotine"
Mais je vois vraiment pas le rapport... Smiley sweatdrop

Aperçu sous FF : upload/9113-test.jpg

Aperçu sous IE : upload/9113-test2.jpg
Modifié par apsy (24 Oct 2006 - 12:31)
Salut Apsy et bienvenu sur le forum...

Ton soucis ne provient pas du bug de la guillotine (je vais avoir un peu de lecture moi) Smiley langue mais du fait que tu places ta propriété list-style-image sur la liste et non sur les éléments de la liste.

Essaye donc avec ceci :
<head>
<style type="text/css">

ul li { 
   float: left;
   margin-right:5px;
   background: url(img/pucefleche_grise.gif) bottom left no-repeat;
   padding: 0 19px 0 10px;
   display: block;
} 

</style>
</head>

<body>
<ul>
  <li>Un test</li>
  <li>Un test</li>
  <li>Un test</li>
</ul>
</body>


Où le padding te permet de caler convenablement les puces en face de chaque item. Smiley murf
Modifié par Cygnus (24 Oct 2006 - 13:48)
Merci Cygnus pour ta réponse alternative. Elle fonctionne très bien.

Cependant, l'histoire du list-style-image n'a donc pas de réelles réponses ?
Car essayé en placant la propriété sur les élements de liste mais rien n'y fait... Bizarre tout ça Smiley smile
Sujet clos
Aller à