Pb sur un menu avec a:hover

Bonjour

J'ai un petit problème avec un menu que je rend un peu dynamique en y mettant la classe a:hoover

En gros je veux que lorsque l'on passe sur le lien une petite image s'affiche(comme une puce) à coté du texte. Pour cela j'inclu dans la balise <A> avant le texte un span contenant l'image avec la propriété display:none/ display:inline lorsque a:hoover.

Mon code CSS:

.menu li {float: left;}

ul {
list-style-type: none;
 margin:0px; padding:0px; width:100%;/* précision pour Opera */}

.menu a {color: #FFFFFF; text-decoration:none; 
border: none;  height:30px; 
display:block;
 text-align: left; 
text-decoration:underline;  
text-decoration:none; 
width:120px; 
font-size:14px; 
font-family:Arial, Helvetica, sans-serif;}

.menu a:hover { color:#FFFFFF ; text-decoration : underline ;
height:30px; 
display:block;}

 .menu a span{ display: inline; 
width:20px; height:23px; 
background-image: url(dossier/images/Puce_titre.png); border-right:5px}

  .menu span{ display: inline}

 .menu a:hover span{width:20px; height:30px; left:0px; top:0px; 
display: inline ; 
background-image:url(dossier/images/Puce_titre.png); 
border-right: 3px;}

mon code html:

<ul class="menu">
	<li><a href="#">
<span><img src="dossier/images/Puce_titre.png" alt="puce_titre" width="20" height="23" /></span>
Accueil
</a></li>
	<li>
<a href="#">
<span><img src="dossier/images/Puce_titre.png" alt="puce_titre" width="20" height="23" /></span>
L'&eacute;quipe
</a>
</li>
	<li><a href="#">Nos R&eacute;alisations </a></li>
	<li><a href="#">Revue de Presse  </a></li>
	<li><a href="#">Nous contacter </a></li>
	</ul>

J'ai deux problémes

1 l'image ne s'affiche pas lorsque je passe sur le lien. Et ceci alors que j'ai précisé à l'attention de IE6:

display:inline 

en dehors de la pseudo class hoover car il ne le reconnait pas sinon (et oui je suis bien allé voir les tutos et les anciennes questions du forum avant de venir vous voir )

2 j'ai créé une bordure à droite de 5px à mon image pour que le texte du lien ne soit pas colé dessus hors rien n'y fait sur IE et sur firefox le texte reste collé à l'image. Ce n'est pas la première fois que j'ai le pb, d'habitude je le contourne avec un padding, mais maintenant j'aimerai bien le comprendre .

Bon et bien voila, si tout ceci vous inspire...
en vous remerciant d'avance.
Modifié par simon250 (21 Nov 2006 - 19:24)

Salut,

Désolé, mais ma réponse ne va guère être constructive par rapport à ton problème.

Tout d'abord, ta méthode me parait compliquée. Pourquoi ne pas tout simplement utiliser la propriété background-image sur le lien et la changer avec la pseudo-classe hover ?

Deuxièmement, utiliser un texte alternatif comme "puce_titre" sur des images est non seulement inutile mais même dommageable car il n'a aucun sens. Puisque cette image est utilisée dans un but de présentation, il vaut mieux écrire alt="".

En fait je n'utilise pas la fonction background image qui varie avec la classe a:hoover, car je veut que lorsque l'image apparait elle déplace le texte...

Pour ce qui est de ta reflexion sur le nom de mon image j'en prend bonne note et je le change tout de suite.

En tout cas je te remercie de ta réponse beaucoup de gens sont allé voir ma question mais à priori elle n'intéresse personne ou bien elle est mal formulée je ne sais pas...