Bug (MenuHorizontal) IE 6

Bonjour, j'ai fais un menu CSS Horizontal avec rollover. Sous Firefox tout est beau mais sous IE il fais un genre de "dégradé".

Voici le code:

CSS

a écrit :

#menu {
position: relative;
margin: 0 50px 0 50px;
padding: 0;
width: 655px;
height: 39px;
}

#menu ul {
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
}

#menu li a {
float: left;
display: block;
width: 108px;
height: 39px;
margin: 0 1px 0 0;
}


#menu a#accueil {
background: url(../images/button/Accueil.jpg) no-repeat;
}

#menu a#accueil:hover {
background: url(../images/button/Over/Accueil.jpg) no-repeat;
}

#menu a#equipe {
background: url(../images/button/Equipe.jpg) no-repeat;
}

#menu a#equipe:hover {
background: url(../images/button/Over/Equipe.jpg) no-repeat;
}

#menu a#clients {
background: url(../images/button/Clients.jpg) no-repeat;
}

#menu a#clients:hover {
background: url(../images/button/Over/Clients.jpg) no-repeat;
}

#menu a#speciaux {
background: url(../images/button/Speciaux.jpg) no-repeat;
}

#menu a#speciaux:hover {
background: url(../images/button/Over/Speciaux.jpg) no-repeat;
}

#menu a#articles {
background: url(../images/button/Articles.jpg) no-repeat;
}

#menu a#articles:hover {
background: url(../images/button/Over/Articles.jpg) no-repeat;
}

#menu a#contact {
background: url(../images/button/Contact.jpg) no-repeat;
}

#menu a#contact:hover {
background: url(../images/button/Over/Contact.jpg) no-repeat;
}

HTML

a écrit :

<div id="menu">
<ul>
<li><a id="accueil" href="index.php?page=accueil" title="Accueil"></a></li>
<li><a id="equipe" href="index.php?page=equipe" title="Équipe"></a></li>
<li><a id="clients" href="index.php?page=clients" title="Clients"></a></li>
<li><a id="speciaux" href="index.php?page=speciaux" title="Spéciaux"></a></li>
<li><a id="articles" href="index.php?page=articles" title="Articles"></a></li>
<li><a id="contact" href="index.php?page=contact" title="Contact"></a></li>
</ul>
</div>

Personne n'est capable de m'aider?

Et voici la soluce pour ceux qui cherche depuis des heures!

Sous IE on est obliger de le mettre dans une <table>

IE c'est mal...

a écrit :

<div id="menu">
<ul>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><li><a id="accueil" href="index.php?page=accueil" title="Accueil"></a></li></td>
<td><li><a id="equipe" href="index.php?page=equipe" title="Équipe"></a></li></td>
<td><li><a id="clients" href="index.php?page=clients" title="Clients"></a></li></td>
<td><li><a id="speciaux" href="index.php?page=speciaux" title="Spéciaux"></a></li></td>
<td><li><a id="articles" href="index.php?page=articles" title="Articles"></a></li></td>
<td><li><a id="contact" href="index.php?page=contact" title="Contact"></a></li></td>
</tr>
</table>
</ul>
</div>

Modifié par geek1983 (10 Mar 2006 - 15:23)

geek1983 a écrit :
Sous IE on est obliger de le mettre dans une <table>

Bonjour geek,
Mais non, c'est juste que float: left;, il ne faut pas le mettre sur #menu li a, mais sur #menu li

@+

a écrit :
Bonjour geek,
Mais non, c'est juste que float: left;, il ne faut pas le mettre sur #menu li a, mais sur #menu li

@+

Eh bien... OUI! Vous avez parfaitement raison, pourquoi n'y ai-je pas pensé plus tôt...

Merci