Ie6 : comment éviter de spécifier la largeur des li en float ?

Bonjour,

Je fais une liste avec des éléments en float:left et je voudrais éviter d'avoir à spécifier leur largeur mais dans ie6, ça bugue (les li prennent toute la largeur de ma liste au lieu de flotter les uns à côté des autres...).

Mon code :

<ul id="nav_main">
    <li><a href="#">texte</a></li>
    <li><a href="#">texte</a></li>
    <li><a href="#">texte</a></li>
    <li><a href="#">texte</a></li>
</ul>

ul#nav_main {
	background:url(/images/common/fonds/fd_menu.gif) 0 0 repeat-x;
	height:37px;
	left:331px;
	position:absolute;
	top:59px;
	width:649px;
}
ul#nav_main li {
	float: left;
	height:37px;
	text-align:center;
}

ul#nav_main li a {
	background:transparent;
	color:#7274a3;
	height:37px;
	font-size:13px;
	font-weight:bold;
	line-height:37px;
	padding:0 17px;
	text-decoration:none;
}

ul#nav_main li a:hover, ul#nav_main li.ici a { background:url(/images/common/fonds/fd_menu_on.gif) 0 0 repeat-x; color:#fff; }

Y a-t-il un moyen d'éviter de spécifier la largeur de chaque li pour pour que ça ne bugue pas dans ie6 ?

(après avoir lu beaucoup de choses sur le problème de hasLayout j'ai testé:

li {display:inline-block;}

mais sans succès...)

Merci d'avance pour vos éclaircissements,

Keph

bonjour

tu peux mettre tes <li> en display:inline au lieu de float

ul#nav_main li {
	display:inline;
	height:37px;
	text-align:center;
}

tes <li> adopteront ainsi comme largeur celle occupée par le texte

verdan a écrit :

ul#nav_main li {
	[b]display:inline;
	height:37px;[/b]
	text-align:center;
}

Ceci est incohérent, un élément en ligne ne peut bénéficier d'une hauteur déterminée.

en effet, j'ai oublié de l'enlever...mes excuses...
on peut par contre jouer sur les padding pour obtenir largeur ou hauteur que l'on souhaite.

Merci à tous les 2,

C'est une piste... effectivement, j'oublie toujours cette possibilité de

display:inline;

Par contre, j'ai oublié de préciser que ma feuille de style contenait ces spécifications concernant les listes en général :

ul { list-style:none; margin:0; padding:0; }
ul li { margin:0; padding:0; }
ul li a { [b]display:block[/b]; margin:0; padding:0; }

et je me demande si le fait d'avoir un display:block sur mes liens ne va pas réduire à néant la tentative avec les display:inline sur les li....

bon je vais tester de toute façon

Bon j'ai testé les

li { display:inline; }

mais ce n'est pas satisfaisant, car ça reporte le problème sur les liens pour les lesquels je ne peux alors plus garder la propriété

li a {display:block;}

qui me permet d'avoir un lien sur une grande surface et pas seulement sur le mot.

Je peux éventuellement corriger le tir avec des padding mais ça m'apparait un peu comme du bricolage, ce que je veux éviter justement à la base...

Je crois qu'une fois encore IE6 m'a tuer...

KePh

tu as aussi la possibilité du line-height pour les liens, ce qui règle le problème de la hauteur et juste un petit padding droite et gauche. (line-height: 37px;)

à mon sens un padding n'est pas du bricolage... c'est une propriété bien utile, tu ne vas quand même pas coller le mot du lien aux bords de ta boite ? si ?

merci verdan,

il va falloir que je re-teste ça mais il me semble que lorsque je passais mes liens en display:inline; (puisque j'y étais obligé par le comportement d'IE6...)
la propriété line-height n'était plus prise en compte (ce qui est sans doute logique) et restait sans effet sur la hauteur apparente de mes liens

sinon je parlais de "bricoler" la hauteur avec des padding... ce qui ne me paraissait pas super satisfaisant...

effectivement, en soi, les padding ne sont pas du bricolage

kephren a écrit :
sinon je parlais de "bricoler" la hauteur avec des padding... ce qui ne me paraissait pas super satisfaisant...

Cela donne parfois des solutions plus accessibles que de figer la hauteur des éléments (en cas d'agrandissement du texte par exemple).
Si le menu avec li en display: inline et padding sur les liens (également en display: inline, mais pas la peine de le préciser pour des éléments a) passe bien, garde cette solution.
Si ça ne te semble pas convenir à ton design, alors il faudra trouver autre chose.

Il me semble avoir déjà rencontré le bug d'IE6 que tu mentionnes. Il me semble que je l'avais corrigé en faisant flotter les liens également. Donc:

ul#nav li {float: left;}
ul#nav li {float: left; height: 37px;}

Mais je dis ça de mémoire et je peux me tromper...

a écrit :
Cela donne parfois des solutions plus accessibles que de figer la hauteur des éléments (en cas d'agrandissement du texte par exemple).

Certes, du point de vue accessibilité, c'est sans doute pas optimal de bloquer la hauteur...

Je vais tester ta proposition, Florent, merci.

KePh