[Relancé] Pb retour à la ligne <li> IE / Fire

Bonjour à tous, j'ai un problème que je n'arrive pas à résoudre, sur une liste de liens, qui doit s'afficher en display:inline.

Voici 2 visuels pour illustrer le problème :

Sous Firefox, si le contenu de mon li dépasse l'espace qui reste sur la ligne, le li est d'abord renvoyé à la ligne et prend tout l'espace disponible


Sous IE, le li ne passe pas à la ligne et s'étend en hauteur, laissant un grand espace vide à gauche :


Voici le code correspondant :

CSS :
ul.listeCat { width:390px; color:#f46f22; }
ul.listeCat li {float:left; background:url(images/puces.gif) 0 0 no-repeat;  padding:0 10px 0 10px; display:inline;}

HTML :
<ul class="listeCat">
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3] d g g g g g g sfs sdf sdf sf sdfs dfs dfs dfsdf sdf sdf sdfsdf sdf sdfsd fsd fsdf sdf sdf sdfs dfs dfsdf ]</a>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
</li>
</ul>

J'ai tenté plusieurs solutions : donner une taille aux li, mettre les a en block, testé des tailles en auto.... rien n'y fait, je n'arrive pas à provoquer chez IE le même retour à la ligne si son contenu a besoin de plus d'espace.

Avant de me résigner à leur donner une taille fixe et à tronquer les éléments qu'elles pourront contenir, je viens vous demander de l'aide
Modifié par cktoon (02 Nov 2006 - 10:52)

c'est assez étrange d'avoir pour un même bloc un float:left et un display:inline en même temps

Avec uniquement un display:inline tu aura je pense le rendu que tu veux.

MrPatate a écrit :
c'est assez étrange d'avoir pour un même bloc un float:left et un display:inline en même temps

Héhé

Sous FireFox, je crois que le display inline est annulé par le float left. Par contre sous IE c'est parfois très utile

FlorentG a écrit :

Héhé

Sous FireFox, je crois que le display inline est annulé par le float left. Par contre sous IE c'est parfois très utile

Yep exact, ça peux servir à résoudre certains bugs pour IE, mais ce n'est pas nécessaire ici.

Un élément doté d'une propriété float adopte automatiquement un comportement de type block, donc le display:inline ici est annulé et ne sert à rien.

Comme les li n'ont pas de largeur définie, Firefox applique la norme au pied de la lettre, le li flottant trop long passe en dessous :

Le W3C a écrit :

Quand il n'y a pas assez de place pour le flottant dans la largeur de la ligne, celui-ci se déplace vers le bas, d'une ligne à l'autre, jusqu'à en trouver une suffisamment large.

IE en revanche garde le flottant à sa place et force la largeur du li.

Il faut donc soit :
- utiliser uniquement display:inline
- utiliser uniquement float, avec une largeur (width) définie

Le display:inline me sert à corriger le bug des doubles marges d'IE. Il m'est utile également pour positionner mon bloc par rapport aux autres qui se trouvent autour de lui, mais que je ne vous ai pas donnés dans le code, car ils ne sont pas pertinents pour ma question.
D'autre part, j'ai une gestion d'images en background pour le positionnement de laquelle il me faut utiliser le float et pas le display inline.
Ma question est donc de comment forcer IE à respecter le retour à la ligne comme il le devrait...

MrPatate a écrit :
Un élément doté d'une propriété float adopte automatiquement un comportement de type block, donc le display:inline ici est annulé et ne sert à rien.

Sauf sous IE, où, même si c'est annulé, ça a son utilité

cktoon a écrit :

Ma question est donc de comment forcer IE à respecter le retour à la ligne comme il le devrait...

Bin... malheureusement je ne pense pas que ce soit possible (sans fixer la largeur)

Soyons optimistes, c'est vendredi 13... quelqu'un aurait peut-être une solution miracle... ?

/Edit/
Bon d'accord, personne ne fait des miracles... je me résigne et je mets un p'tit résolu comme il faut
Modifié par cktoon (23 Oct 2006 - 13:41)

Bonjour à tous, je viens de prendre le problème d'une autre manière ... le retour à la ligne est correct maintenant sous IE, mais l'image de fond du li qui est sur 2 lignes disparaît...

Revoici les éléments :

<ul>
<li><a href="#">libellé court</a></li>
<li><a href="#">ibellé court</a></li>
<li><a href="#">libellé très long qui va être renvoyé à la ligne</a></li>
</ul>

avec la css :

(le ul est dans un conteneur, avec une taille relative, pour laquelle le libellé long déborde évidemment...)ul {margin-left:0; padding-left:40px; width:50%; }
ul li { list-style-type:none; display:inline; }
a { background:url(images/pictosCategories.gif) 0 0 no-repeat; padding-left:10px;  }

Donc cette fois, le libellé qui est renvoyé à la ligne est correctement géré par IE, mais son image de fond n'est plus visible....
Une idée ?

bonjour : essai:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>XHTML 1.0 Strict</title><style type='text/css'>ul {margin-left:0; padding-left:40px; width:50%; }

ul li { list-style-type:none; display:inline; }
ul >li {float:left;}
a { background: #eee url(images/pictosCategories.gif) 0 0 no-repeat; padding-left:10px; zoom:1;  }</style><script type='text/javascript'></script></head><body><ul class="listeCat">
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3] d g g g 
g g g sfs sdf sdf sf sdfs dfs dfs dfsdf sdf 
sdf sdfsdf sdf sdfsd fsd fsdf sdf sdf sdfs 
dfs dfsdf ]</a>
<li><a href="#">[sous-CATEGORIE NIV 3]</a></li>
</li>
<li><a href="#">[CATEGORIE NIV 3] d g g g 
g g g sfs sdf sdf sf sdfs dfs dfs dfsdf sdf 
sdf sdfsdf sdf sdfsd fsd fsdf sdf sdf sdfs 
dfs dfsdf ]</a></li>
</ul></body></html>

le zoom:1 peut-etre remplacé par un display:inline-block a l'attention de IE uniquement .

pas tester avec des images , est ce que tu recherche ou c pas bon ?

++
Modifié par gcyrillus (02 Nov 2006 - 11:49)

Salut,
ce n'est pas encore exactement ce que je cherche, avec des images voilà ce que ça donne :

mais j'aimerais arriver à ce que j'obtiens sous Firefox si j'enlève ta ligne ul >li en float (désolée j'arrive pas à uploader la deuxième image...)

Avec ta solution, le li qui est trop long commence par être envoyé à la ligne avant de s'afficher...

Rrrraaaaaa c'est galère !!!

a écrit :
Avec ta solution, le li qui est trop long commence par être envoyé à la ligne avant de s'afficher...

si ce n'est pas ce que tu veut donc , tu ne pourras pas afficher l'image , ce que je propose , active le layout dans IE et dans firefoxe , le float empeche les uns et les autres li de se chevauchées.

Dans les 2 cas on peut afficher l'image , mais en empechant se retour a la ligne , les li se superpose dans IE , et celle ou il y a un retour a la ligne voit son image afficher en debut de ligne et pas exactement la ou on voudrais .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html 

xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>XHTML 1.0 

Strict</title><style type='text/css'>ul {margin-left:0; padding-left:40px; 

width:50%; }

ul li { list-style-type:none; display:inline }
a { background: #eee 

url(http://forum.alsacreations.com/skins/alsacreations/upload.gif) 0 0 no-repeat; 

padding-left:10px;   }</style><script 

type='text/javascript'></script></head><body><ul class="listeCat">
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li ><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#">[CATEGORIE NIV 3]</a></li>
<li><a href="#"style="position:relative;">[CATEGORIE NIV 3] d g g g 
g g g sfs sdf sdf sf sdfs dfs dfs dfsdf sdf 
sdf sdfsdf sdf sdfsd fsd fsdf sdf sdf sdfs 
dfs dfsdf ]</a>
<ul>
<li><a href="#">[sous-CATEGORIE NIV 3]</a></li>
</ul>
</li>
<li><a href="#">[CATEGORIE NIV 3] d g g g 
g g g sfs sdf sdf sf sdfs dfs dfs dfsdf sdf 
sdf sdfsdf sdf sdfsd fsd fsdf sdf sdf sdfs 
dfs dfsdf ]</a></li>
</ul></body></html>

une petite correction su l'imbrication de liste je crois et un position:relatives pour active l'affichage de la puce dans IE.

Le retoura la ligne semble necessaire si tu ne veut pas integré l'image au html

++

gcyrillus a écrit :
Le retoura la ligne semble necessaire si tu ne veut pas integré l'image au html

Exact, j'arrive à la même conclusion....
Je vais surement devoir m'orienter vers ça malheureusement ...