[Résolu] Hover sur list-style-image différent suivant IE7 et FF

Bonjour,

J'ai bêtement une liste à puces verticales, avec pour chaque élément de la liste, une puce (issue d'une image) et son texte correspondant à sa droite qui est un lien.
J'utilise ensuite la propriété "hover" pour qu'au survol du lien, les types de puces changent.
Du moins c'est que je voulais.
Sous IE (IE7), pas de problèems: au survol des items de la liste, les iamges des puces changent bien, par contre, sous FF (v2), aucune modification.

C'est bien uniquement un problème lié à ces puces, car si je teste pour faire changer la couleur du texte par exemple, cela fonctionne sous IE et FF.

Ci-dessous, le code.
Ai-je fait une erreur ou bien est-ce un problème connu (je n'ai reine trouvé sur le net à ce sujet).

Ma solution de repli, est bien sûr de transformer cette puce qui doit changer au survol, en une image de fond, car là, je sais que cela marchera sous les 2 navigateurs.

Vos avis éclairés me seront d'un grand secours.

Le code:

#ss_menu_formatmedia {
	margin : 0;
	padding : 0;
}

#ss_menu_formatmedia ul {
	margin : 0;
	list-style-position:inside;
	list-style-image: url("img/petits_carres.gif");
	list-style-type: square;
	padding : 5px 0px 0px 0px;
}
	  
#ss_menu_formatmedia li {
	margin: 0px 0px 0px 50px;
	font: 11px Helvetica, Arial, Verdana, sans-serif;
	padding : 0;}
	  
#ss_menu_formatmedia a {
	color : #000066;
	text-align : left;
	text-decoration : none;
	list-style-position:inside;
	list-style-image: url("img/petits_carres.gif");
	list-style-type: square;	}
	  
#ss_menu_formatmedia a:hover,#ss_menu_formatmedia a:active {
	color : #ffffff;
	list-style-position:inside;
	sur ce lien pour quque le: url("img/petits_carres_mauve.gif");
	list-style-type: square;}

#ss_menu_formatmedia a.active:link,#ss_menu_formatmedia a.active:visited {
	color : #ffcc00;
	list-style-position:inside;
	list-style-image: url("img/petits_carres_mauve.gif");
	list-style-type: square;}

Merci
Furet

Bonjour,

Tu confonds 2 chose, le hover sur le lien qui est fonctionnel sur tous les navigateurs et le hover sur <li> qui ne marchera que sous FF et IE7 (pas IE6).

 ul {
	margin : 0;
	list-style-position:inside;
	padding : 5px 0px 0px 0px;

}

li {
	margin: 0px 0px 0px 50px;
	font: 11px Helvetica, Arial, Verdana, sans-serif;
	padding : 0;
	list-style-image: url("puce_off.gif");
	}  	 
	
 li:hover {
	list-style-image: url("puce_on.gif");
	}	

 a {
	color : #000066;
	text-align : left;
	text-decoration : none;
	}

 a:hover{
	color : red;
 }

Mais bien sûr Ghost, tu as 100 % raison, et je suis un parfait abruti.
En effet, cela ne pouvait pas marcher en mettant le hover sur le a !

En mettant le hover sur le li, normal, ça marche.

Ah, cela me rassurée, moi qui ai failli douter un instant de FF.

Merci.
(Le fait est, que cela marchait quand même sous IE7. Encore une différence d'interprétation !)
Furet92
Modifié par furet92 (13 Mar 2007 - 00:07)

En fait le style de puce est défini pour toute la liste. C'est une propriété du <ul> lui-même. Dès lors, il est impossible de changer cette puce pour un seul <li> ou un seul <a>.

Par contre utiliser des images de fond est tout à fait approprié dans ce cas. Et si tu les donnes au <a> directement, les utilisateurs d'IE6 pourront aussi en profiter.

EDIT Autant pour moi, je ne savais pas qu'on pouvait aussi le définir pour chaque <li>. On en apprend tous les jours.
Modifié par <nicolas> (13 Mar 2007 - 00:11)

Re,

Autant pour moi désolé mon code n'est pas top !, la propriété pour la puce_off ne doit pas être placée pour <li> mais pour <ul>, pour le reste ça fonctionne (au moins ie7 et FF pas ie6 ni opera je crois) mais les images de fond sur <a> c'est plus portable et plus robuste.