Probleme avec alignement des items d'un menu horizontal sous IE

04 déc. 2007, 20:25

Bonsoir,

Des menus à base de CSS, en utilisant un systeme de liste (ul, li), j'en ai fait des paquets : )

Et pourtant, je bloque sur un problème sur lequel je n'avais jamais buté avant :

http://wir3d.net/sites/jeuxconcours/site/ (le problème ne survient que sous IE)

Le HTML qui génère le menu :

Code : Tout sélectionner

<div id="menu">
    	<ul>
        	<li><a href="#">ACCUEIL</a></li>
            <li><a href="#">LES CONCOURS</a></li>
            <li><a href="#">PROPOSER UN CONCOURS</a></li>
            <li><a href="#">OUTILS</a></li>
        </ul>
    </div>

Et le CSS qui gere cette partie :

Code : Tout sélectionner

/* MENU */
#menu {
position:absolute;
left:233px;
top:101px;

width:728px;
height:30px;
}
#menu ul {
margin:0px;
padding:0px;
list-style-type: none;
}

#menu a {
width:177px;
height:28px;
line-height:30px;

border:1px solid #a8a8a8;
background:url(img/menu_bg.gif) repeat-x;
vertical-align:middle;

margin-right:4px;
display:block;
float:left;

text-align:center;

text-decoration:none;
color:#5c5c5c;
font-size:12px;
}

#menu a:hover {
background:#DDDDDD; 
}
/* MENU END */

J'ai essayé de mettre des float:left; des display:inline; des margin et padding:0px un peu partout, rien n'y change.

Une suggestion ?

Merci d'avance.

05 déc. 2007, 11:25

Tu imposes le float:left aux liens hypertextes. Essayes plutot de mettre ton float à la liste.

Code : Tout sélectionner

#menu li {
   float:left;
   width:177px;
   height:28px;
}

05 déc. 2007, 15:30

Oui, juste une précision :

Tu ne peux pas utiliser display:inline si tu veux pouvoir imposer des dimensions à tes éléments de liste.

Reste donc la syntaxe float:left comme l'a montré V4GaB0nD

Probleme avec alignement des items d'un menu horizontal sous IE

Qui est en ligne