[CSS][Firefox] background-image tronquée

Dev
1

Voilà le probleme je fait des petits boutons css qui sont constitués d’un lien, d’uen background-image (qui peut eventuellement changer en cas de passage de la souris) et d’une image posée par dessus (qui peut eventuellement etre simplement un gif transparent)

La background-image est plus petite que le bouton mais elle ne s’affiche pas entierement sous firefox (elle est tronquée en haut et en bas) et j’ai beau cherché partout, j’arrive pas à comprendre comment éviter ça.

Le code du css :

.gauche { display: inline;list-style-type: none;border: thin 1px #000000;} .gauche a {width: 115px; height: 25px;background-image: url(boutons/pt_gauche.gif);background-repeat: no-repeat;background-position: center center;padding: 0px;margin: 0px;} .gauche a:hover {width: 111px; height: 21px;background-image: url(boutons/pt_gauche.gif);background-repeat: no-repeat;border: solid 2px #04248A;} .gauche img { border: none;}

le code html :

2
  • Essaye sans la balise de fermeture
  • Essaye plutôt de définir tes containers comme ça: . Ton lien étant une boite qui peut réagir. Pour modifier les propriétés du span: a span {}
  • Le problème de calage doit venir d’un bordure extérieure ou intérieure. Essaye en spécifiant tout à zéro puis jouer avec une bordure d’1px pour voir où ça coince (sur img et gauche).
3

Applique un « border: 1px solid; » à ton « .gauche a », tu verras sans doute qu’avoir spécifié hauteur et largeur sur cette balise ne marche pas, la balise a est par défaut de type « inline ». Si tu veux specifier une hauteur et largeur, il faut en faire un block (display: block;) je pense :stuck_out_tongue: