Salut a tous!!

Bon, comme d'hab' il y a toujours un truc qui ne va pas sur mon $*^%&' de site!! Comme souvent, c'est la compatibilité Firefox/IE qui est de la partie... Mais ce coup si, c'est Firefox qui n'en fait qu'a se tete! Dans mon menu honrizontale il y a des liens (naaaann??? ), ils ont chacun une image differente et un :hover different aussi... Sous IE le :hover marche nickel sur tous mes liens mais sous Firefox il n'y a que le dernier dont le :hover fonctionne...

voici mon code html :

Citation : HTML

<div id="menu1">

<ul>

<li><a href="page1" class="lien1"></a></li>
<li><a href="page2" class="lien2"></a></li>
<li><a href="page3" class="lien3"></a></li>
<li><a href="page4" class="lien4"></a></li>
<li><a href="page5" class="lien5"></a></li>
<li><a href="page6" class="lien6"></a></li>

</ul>

</div><souligne></souligne>

Et mon css :

Citation : CSS

li
{
display : inline;
}
#menu1
{
margin-top: 44px;
margin-left: -32px;
}
.lien1
{
background-image: url("images/lien1.jpg");
width: 70px;
height: 23px;
display: block;
}
.lien1:hover
{
background-image: url("images/lien1-2.jpg");
}
.lien2
{
background-image: url("images/lien2.jpg");
width: 70px;
height: 23px;
display: block;
margin-left: 95px;
margin-top: -23px;
}
.lien2:hover
{
background-image: url("images/lien2-2.jpg");
}
.lien3
{
background-image: url("images/lien3.jpg");
width: 100px;
height: 23px;
display: block;
margin-left: 182px;
margin-top: -23px;
}
.lien3:hover
{
background-image: url("images/lien3-2.jpg");
}
.lien4
{
background-image: url("images/lien4.jpg");
width: 77px;
height: 23px;
display: block;
margin-left: 302px;
margin-top: -23px;
}
.lien4:hover
{
background-image: url("images/lien4-2.jpg");
}
.lien5
{
background-image: url("images/lien5.jpg");
width: 70px;
height: 23px;
display: block;
margin-left: 401px;
margin-top: -23px;
}
.lien5:hover
{
background-image: url("images/lien5-2.jpg");
}
.lien6
{
background-image: url("images/lien6.jpg");
width: 70px;
height: 23px;
display: block;
margin-left: 492px;
margin-top: -23px;
}
.lien6t:hover
{
background-image: url("images/lien6-2.jpg");
}

Voila voila... J'espere que vous allez m'aider car c'est vraiment embarrasant comme probleme et je n'arrive pas a le regler. Il suffirai de faire en sorte que chacune des balises li soient unique je pense mais est-ce que c'est possible ???
J'ai aussi essayé de mettre une balise <br/> a la fin de chaque li et j'ai remarqué que tous les :hover fonctionnent correctement quand ils ne sont pas sur la meme ligne...

Merci d'avance pour vos reponses et j'espere quelles seront nombreuses