[Résolu]Background-image d'un lien

Voila mon problème :
Pour un menu j'ai une image, quand on met sa souris dessus ça change l'image (j'avais un code js pour ça avant mais en css je veux le faire en css now).
J'ai donc fait un code qui fonctionne sur IE mais sur Mozilla je vois rien, il prend pas la largeur et la hauteur que je lui ait dit -_-

HTML :

<a href="?page=histoire" class="menu_histoire"></a>

CSS :

.menu_histoire {
	background-image : url("images/histoire.jpg");
            width: 113px;
            height: 27px;
}
.menu_histoire:hover {
	background-image : url("images/histoire_on.jpg");
}

J'aimerai donc savoir pourquoi Mozilla ne prend pas en compte ma largeur. Si je met du texte entre les <a></a> je vois bien mon image derrière donc c'est pas un problème de lien ou autre.

Merci si quelqu'un avait une solution.
Modifié le 07 Jan 2005 - 12:55

Parce qu'un lien est un élément inline, donc faut rajouter display: block;

Ensuite, je vois que tu as rien mis dans ta balise <a> , c'est vraiment pas bien. Va voir ton truc sur Lynx par exemple, et le lien ne sera même pas afficher. Donc met au moins une span dedans, avec le texte du lien, que tu planquera dans le CSS.

Bonjour à toi aussi, Nautiljon et bienvenue sur le forum.

Un lien dans le menu indique quelques tutoriels CSS, dont celui des liens et images réactives :
http://www.alsacreations.com/articles/imgreactive/

Effectivement, comme le dit FlorentG, les balises inline (presque toutes), n'ont pas de hauteur et largeur.

Oui bonjour a tous déjà ^^

Oki je vous remercie bien ça fonctionne, j'ai aussi mis les span.

Je savais pas pour les balises inside, enfin je vois toujours pas très bien ce qu'on appel une balise inside ?

Et sinon je vais me servir de l'article je pense pour le mode de préchargement des images, là j'ai un script JS là mais je pense utiliser celle de l'article, s'mieux ^^

Merci bien pour ces réponses rapide

A bientôt (hé oui je refait mon vieux site avec du css donc j'aurai d'autres problèmes )

Nautiljon a écrit :

Je savais pas pour les balises inside, enfin je vois toujours pas très bien ce qu'on appel une balise inside ?

"inside" ? Tu veux dire inline, je suppose
Voici une explication :
http://www.alsacreations.com/articles/blocinline/

Nautiljon a écrit :

Et sinon je vais me servir de l'article je pense pour le mode de préchargement des images, là j'ai un script JS là mais je pense utiliser celle de l'article, s'mieux ^^

Pour le rollover sans préchargement, voici deux solutions très adaptées :
http://www.elmoustikoblog.net/tutoriels/css/roll_over/
http://www.alsacreations.com/articles/rollover_unique/

Oki c'est cool, c'est clair maintenant !

Merci bien.

mmm, en faite j'aimerai aussi faire un menu horizontal, et dans les methodes présentées, faut mettre un display: block au lien pour lui attribuer une taille. Mais cette fonction fait automatiquement passer a la ligne l'objet. Moi je voudrais qu'il reste sur la même ligne, j'ai essayer avec des top negatifs mais ça crée un espace vide que j'arrive pas a enlever en dessous après. Y'a une solution alors pour un menu horizontal ?

Il n'y a pas que le display:block, comme tu as des éléments blocks c'est normal qu'ils passent à la ligne , pour avoir un menu horizontal tu dois en plus utiliser un float.

li{float:left;}
li a{display:block;width:xxx etc.;}