IE et li:hover

Bonjour,

J'ai fait un effet de roll over "block" sur les <li></li> (dont le contenu est un lien et du texte). Ca marche très bien sur les navigateurs, sauf IE, qui ne comprends pas, comment pourrais-je contourner le problème svp ?

Une image valant mieux que des mots : http://www.duelart.net/index_2.html

Dans la CSS j'ai mis :

ul {
	list-style-type: none;
	margin: 0; 
	padding: 0; 
}
li {
	border-bottom: 1px solid #D6C559;
	color: #D6C559;  
	padding: 10px;
	display: block;
}
li:hover {
	background: #D6C559;
}
li a {
	color: #FFF;
	text-decoration : none;
}

Ie n'interprete le :hover que pour l'élément <a> , donc à toi de voir pour adapter le code pour que le hover soit sur le <a>.

Salut

il faut faire un truc du genre

.menu a {
	display: block;
	width: auto;
}
.menu a:hover, .menu a:active {
	display: block;
	margin: 0px;
	width: auto;
/* code pour hover ici*/

}

A+

gege71 a écrit :
Salut

il faut faire un truc du genre

.menu a {
	display: block;
	width: auto;
}
.menu a:hover, .menu a:active {
	display: block;
	margin: 0px;
	width: auto;
/* code pour hover ici*/

}

A+

Merci. Mon problème c'est que j'ai un lien + du texte de couleur différente. Effectivement si je fais display:block pour mon lien, ça prend toute la longeur du <li> mais ça place de fait le texte à la ligne.
Si je comprends le texte dans le lien, je ne peux plus lui attribuer une couleur différente et si je fais 2 liens pour changer de couleur, ça créé forcemment 2 blocks…
Ahhhh IE quel merveilleux navigateur (c'est ironique).

Salut !
Pour être sûr que ie interprete correctement ton rollover il faut respecter l'odre suivant dans la déclaration des propriétés css : link, hover, active, visited

Bonjour,

petite rectification c'est

link
visited
hover
active

Moyen mnemotechnique pour s'en rappeler, LoVe HAte

Salut

Ivy a écrit :

Merci. Mon problème c'est que j'ai un lien + du texte de couleur différente. Effectivement si je fais display:block pour mon lien, ça prend toute la longeur du <li> mais ça place de fait le texte à la ligne.

Voici une solution a ton probleme

<li>
    <a href="http://........" > TXT du Lien  [#red]<span>— intégration flash</span>[/#]</a>
</li>

et dan le CSS tu rajoute

.menu a span {
 color...
}

Tu peux même t'amuser avec

.menu a:hover span {
 Autre color...
}

Ivy a écrit :
Ahhhh IE quel merveilleux navigateur (c'est ironique).

mais non

A+

gege71 a écrit :
Voici une solution a ton probleme

<li>
    <a href="http://........" > TXT du Lien  [#red]<span>— intégration flash</span>[/#]</a>
</li>

Merci ! je vais essayer de me débrouiller avec ça et je mettrai résolu ce soir au cas où je rencontre un problème en cours de route
Je n'ai pas pensé à mettre un <span> dans le lien, j'ai honte

Bonjour,
utilisez plutôt la méthode du selecteur CSS d'enfant, IE ne reconnait pas ce type de synthaxe : #id > ul a {width:auto;}
exemple :

<!-- fichier HTML -->
<div id="menu">
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Qui sommes-nous</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

/* fichier CSS */

#menu {}

#menu a {
  display:block;
  [b]width:.1em;[/b]
  padding:10px 10px 0px 10px;
}

[b]#menu > ul a {width:auto;}[/b]

La manoeuvre consiste à étendre la zone cliquable en ajoutant une valeur X à width de l'ancre pour tromper IE, et réinitialiser la valeur du width pour les autres navigateurs.

spoison.