Liste avec display : inline + les puces

Bonjour à tous, j'ai un léger soucis avec une manipulation de liste.

J'ai donc une liste tout ce qu'il y a de plus classique :

<ul class="navBar">
<li>patati...</li>
<li>patata...</li>
</ul>

et dans mon CSS j'ai :

ul.checkoutBar {
	list-style-image:url(../img/puce.png);
	list-style-position:inside;
	border:1px solid #bbb;
	margin:10px 5px;
	background:#FFF;
	padding:2px;
}

ul.checkoutBar li {
	display:inline;
	margin-left:20px;
}

Seulement voila, quand je fais un display : inline, les puces disparaissent ce qui je crois est l'interpretation normale, mais j'aimerais les garder quand même.

J'ai essayé avec un float, ca marche sur Firefox, mais pas sur IE, de plus le float m'oblige à mettre un <hr> avec un clear:both pour que mon <ul> englobe mes <li> (car il a une bordure autour). Et sémantiquement parlant, j'aimerais éviter de mettre un <hr> dans une liste, dans mon cas ce n'est pas pertinent.

J'aimerais également éviter de mettre mes puces dans des <img src="puce.png"> car ces images n'ont valeur que de décoration...

Donc voici ma question : y a t'il une propriété magique pour garder les puces avec la propriété display : inline ?
Modifié par zmove (17 Aug 2006 - 16:28)

Bonjour,

Oui c'est normal, la valeur « inline » de la propriété display annulant la la valeur « list-item » (de cette même propriété) qui est celle par défaut de cet élément LI.

Solution possible : afficher l'image représantant la puce via la propriété background-image (avec padding ou text-indent). Ce qui permettra d'ailleurs un placement plus précis de la puce.

Ceci dit, tu peux utiliser la propriété float sans avoir à recourir à <hr />. Overflow avec une autre valeur que « visible » forcera l'élément UL à englober les flottants, ce qu'on pourra également obtenir avec IE<=6 grâce à une propriété dotant UL de layout (comme width ou zoom:1)
par exemple :

ul {
	overflow: hidden;
	width: 100%; 
	margin: 0;
	padding: 0;
}

Mais là encore tu devras probablement utiliser background à cause d'Internet Explorer
Modifié par Alan (17 Aug 2006 - 17:08)

hmmmm ok, terrible le overflow, je me suis renseigné dessus, je connaissais pas.

Sinon, ben ca marche niquel sous firefox et sans <hr> ^^

sous IE ben....... (osef ?) j'hésite encore ^^
Modifié par zmove (17 Aug 2006 - 17:16)