28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Le problème que je rencontre se produit en voulant afficher une image d'arrière plan sur un "a" contenu dans un "li".

La puce s'affiche bien sous Firefox mais ni sous IE 6 ni sous Netscape 7.

Je sèche un peu Smiley smile

Le CSS en question :

#gauche li a {
display:block;
border:1px solid #ffffff;
color:#000000;
height:1.1em;
line-height:1.1em;
padding:2px 4px 2px 25px;
white-space: nowrap;
text-decoration:none;
}

#gauche li a:hover {
border:1px solid #3366cc;
padding:2px 4px 2px 25px;
background:url(img/puce.gif)10px center no-repeat;
}


Et le code Html :
<div id="gauche">
   <h4>Rubrique 1</h4>
   <ul>
	<li><a href="#">intitulé menu</a></li>
	<li><a href="#">intitulé menu</a></li>
	<li><a href="#">intitulé menu</a></li>
	<li><a href="#">intitulé menu</a></li>
   </ul>
 </div>


Merci de vos conseils Smiley smile
Modifié par Philos (01 Aug 2006 - 23:48)
rajoute un espace entre l'url de ton image et ton 10px et ton image va s'afficher en IE et FF

#gauche li a:hover {
border:1px solid #3366cc;
padding:2px 4px 2px 25px;
background:[#red]url(puce.gif) 10px[/#] center no-repeat;
}

Modifié par s_har_k (01 Aug 2006 - 22:14)
Merci s_har_k !

Effectivement, les deux valeurs étaient collées... comme mes yeux sans doute Smiley smile .

Cela a résolu le souci sous IE, mais Netscape7 par contre me refuse toujours l'affichage de la puce au survol. Dans Firefox l'affichage était bon même avant ta correction.
Modifié par Philos (01 Aug 2006 - 23:37)
J'ai trouvé.

Netscape n'apprécie pas le mélange des valeurs pour le background-position, tout en pixels ça passe, tout en % ou tout en left/center aussi mais du pixel + center ça le fait pas (uniquement avec Netscape).

Vala, donc résolu finalement Smiley smile

Merci encore.