[Résolu]Taille des <li> sous ie6

Bonjour,

c'est mon premier post ici..

Voilà mon problème : j'ai créé un menu horizontal, avec une liste, dont les items sont mis en float : left. J'ai mis comme background une image qui peut s'étendre en fonction de la longueur du titre.
Pour être plus explicite, voici mon code css :

/* Menu en ligne */

li.menu_rubrique {
	float : left;
	height : 25px;
	background : url("imgs/bouton_left.png") top left no-repeat;
}

.menu_rubrique a {
	text-decoration : none;
	display : block;
	padding-top : 3px;
	margin-left : 2px;
	padding-right : 15px;
	padding-bottom : 5px;
	height : 25px;
	background : url("imgs/bouton_right.png") top right no-repeat;
}

La chose passe bien sous Firefox, Konqueror et IE7, mais pas sous IE6.
Sous IE6 il semble que le navigateur, au lieu de donner une taille nulle par défaut à l'item, lui donne une taille de 100%, ce qui fait qu'au lieu d'avoir un menu horizontal, j'ai purement et simplement une liste...

Je ne sais pas si je si très très clair, donc si vous voulez que je vous envoie un lien de démo, y'a pas de problème.
Modifié par earendil (13 Sep 2007 - 10:00)

Bonsoir,

earendil a écrit :
c'est mon premier post ici..

Bienvenue sur le forum, alors.

earendil a écrit :
si vous voulez que je vous envoie un lien de démo, y'a pas de problème.

Ce sera effectivement plus simple pour t'aider (même si tu donnes déjà les informations principales).

Sinon, de mémoire je vois deux explications possibles pour ce problème:
1. un problème de HasLayout;
2. quelque chose lié à ce qui est décrit dans l'article Impact sur le rendu de la mise en forme du code HTML.

Mais là c'est un peu au pif, aucune garantie.

Bonsoir et bienvenue
la largeur à 100% de tes li est due au display:block de tes liens dont le comportement (toute la largeur disponible par default et retour chariot ava,y et aprés l'élément) se répercute en quelque sorte au niveau des li.

Tu as deux possibilités pour résoudre ton problème:
> soit tu passes le display:block de tes liens en float:left
> soit tu attribues une largeur à tes li.
Modifié par Hermann (12 Sep 2007 - 20:55)

Merci pour les réponses (rapides et claires...).
Je soupçonnais effectivement le display:block, j'ai donc fais comme le proposais Hermann en le remplaçant par un float:left et ça marche !

Merci encore