Menu Horizontal et IE

Tout d'abord bonsoir, ceci est mon premier post mais je vous suis depuis bien longtemps....
Aujourd'hui j'attaque de front mon premier site et je tombe sur une belle heu...chose embêtante

Un jolie menu sous FF tout vas bien:
http://img88.imageshack.us/img88/4162/ffyg3.jpg

Donc je continue mon design jusqu'à finir...et je me dis..tiens je vais tester sous IE pour voir...et là c'est le choc

http://img233.imageshack.us/img233/3554/iehb4.jpg

J'ai chercher un peu d'où pouvait venir mon erreur... j'ai remarqué qu'IE n'aimais pas que je ne fixe pas de longueur maximum pour les bouton car en la fixant c'est déjà moins moche

donc voici le code:

#menu ul {
	list-style: none;
	margin: 0;
	text-align:center;
}

#menu li {
	float: left;
}

#menu li a{
	padding-left: 6px;
	padding-right: 6px;
	position:relative;
	top:20px;
	display: block;
	height: 20px;
	line-height:20px;
	text-align:center;
	color: white;
	background: #750d26;
	font-size: 12px;
	text-decoration: none;
}

#menu li a.active{

	padding-left: 0px;
	padding-right: 0px;
	font-weight: bold;
	color: #a81337;
	position:relative;
	top:10px;
	height: 30px;
	line-height:30px;
	width:100px;
	background: url(design/menu_a.png);
}

J'ai chercher dans le forum...j'ai vu plein de problème sous IE mais pas le mien... En espérant avoir été assez clair et avoir respecté toutes les règles, j'espère avoir des réponses afin de finir mon premier site web ^^

Heu....ça peu aussi être utile je pense le site
Modifié par SteeL (23 Oct 2007 - 22:08)

hello

IE encaisse pas le :

li{
    float:left;
}

essaie plutôt de faire des div avec comme propriétés :
display:inline;

ou sinon des span ; mais pas de liste horizontale !
le code a l'air propre, ca devrait marcher....

Salut,

Plus prosaïquement en fait si tu ne donnes pas de width à te li, ie6 leur réserve 100% de l'espace disponible si bien que même en float, elles passent à la ligne...

Sinon, si la suite du menu ne nécessite pas de blocs, tu peux supprimer le float left et le remplacer par display: inline pour tes li et suprimer le display: block de tes <a> (de là a supprimer les <li> et les remplacer par des <div> ... ou des <span> faut pas exagérer )

Je n'ai pas tout tout compris de la 1ère méthode....et pour la seconde ça me fait des menu tout bizarre autant sur FF que sur IE

http://img98.imageshack.us/img98/9381/inlinekj0.jpg

J'ai essayer de réorganiser le tout (sous FF) mais je n'ai pas réussi à atteindre le même résultat....Finalement, retour à la case départ...Peux t on réaliser le même menu avec un display:inline ? Si oui comment?

Encore merci de votre aide (en plus super rapide)

Re,

A tester essaye de ne pas passer à la ligne entre 2 <li>

<li>bla bla bla<li><li>bla bla bla<li><li>bla bla bla<li>...<li>bla bla bla<li>

J'ai testé...et aucun changement

Re,

Si c'est ça je meurs de rire de n'y avoir pas pensé avant !

*{margin: 0; padding: 0}

A placer, juste pour le test dans ta css. Ta mise en page sera peut être perturbée mais pour voir si ce n'est pas un problème de margin ou padding, on affecte à tous les éléments un margin et padding nul ce qui permet de supprimer les valeurs par défaut de chaque navigateur.
Si le défaut du menu est corrigé, tu affecteras (margin:0; padding: 0) là où il le faut.

Arfff.....ça ne change pas le défault...Satané IE

@Ghost : quel est le problème sur un menu en ligne de changer les <li> par des <div> ou des <span> ? ce n'est pas un changement radical...

Steel, si tu n'arrives pas à faire ce que tu veux, essaie tout de même ma solution (même si je pense qu'avec la solution de ghost, tu avais presque résolu ton problème).

je t'explicite ce que je voulais dire :

ce que je propose, c'est : plus de <ul>, plus de <li>, mais des <div> à la place de tes <li>.
Par défaut, quand tu mets deux <div> à la suite, la seconde va à la ligne. Car, par défaut, pour une <div>, le display est égal à "block". Donc on va ici donner un style display:inline; à chaque div :

#menu div{
    display:inline
}

comme ça plusde risque de retour à la ligne sur IE comme sur firefox.
Bien entendu, d'après ce que j'ai dit, tu auras viré ce "display:block;" qui traine dans tes "#menu li a" !!!

voila, bon courage !

Salut,

@NikOo

Ben juste une histoire pratique, en utilisant des <div>, tu ne changes pas du tout le problème... et surtout il y a une question de sémantique à ne vraiment pas négliger ...