Li, hover et IE...

Bonsoir,

Voilà en faisant un petit test sous IE je viens de me rendre compte que l'attribut background-image sur un li etait pas pris en compte par IE...

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
width: 120px;
height: 20px;
padding: 5px;
background: transparent;
border-bottom: 1px solid #FFFFFF;
}
.menugauche li:hover {
background-image: url("interface/bg-lienmenu.jpg");
}
.menugauche a {
display: block;
color: #FFFFFF;
font-size: 14px;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;
}

Mon image sur le li:hover ne s'affiche que sous forefox et safari.
JE cherche une solution mais rien ne veut venir ce soir

Bonjour supercanard

En fait, ce n'est pas background-image qui est en cause.
IE n'implémente la pseudo-classe :hover que sur l'élément <a>.

Exact
MErci pour l'info.
Donc la solution serrait de mettre le background sur le a:hover
Mais dans ca cas là il faut que je passe toutes les proprietes de li sur a. Sinon niveau des tailles ça foire. Mais dans ce cas il va plus rien rester sur li et li:hover... j'en fait quoi de mes li ?

supercanard a écrit :

j'en fait quoi de mes li ?

Sans le HTML, difficile de se prononcer mais si c'est pour une liste de liens, tu peux laisser tel quel...

Bon et bien j'ai fait comme ça et ça a l'air de fonctionner

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
}
.menugauche li:hover {

}
.menugauche a {
display: block;
width: 120px;
height: 20px;
padding: 5px;
background: transparent;
border-bottom: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 14px;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;
background-image: url("interface/bg-lienmenu.jpg");
}

ça me fait byzar de laisser li et li:hover vide mais bon

à mon avis tu peux supprimer dans ton css ce qui est vide