Bonjour à tous,
voilà je dois faire des boutons pour un générateur de formulaire, donc je fais mes boutons avec des "type=button" classique et je leur met une image de fond dans ma feuille de style:
Sous Ie et FF tout va bien mais sous Safari, l'image ne s'affiche pas, il me met les boutons par défaut de safari...
quelle problème me direz-vous? et bien autour de ce bouton j'affiche des images (à gauche et à droite) pour "finir" le bouton... car mon image de fond ne fait que 1px de large afin que la taille de l'image s'adapte au contenu du "value" du bouton...
donc comme Safari n'aime pas les images de fond dans le bouton, je feinte en remplaçant le bouton par un lien auquel je met ma classe avec l'image de fond...
en gros, mon bouton:
les classes utilisées:
Et là sous Ie et FF, ben tout marche niquel aussi à part des petits décalages que j'adapte dans ma css en fonction des deux...
sous Safari, tout s'affiche (ouais c'est cool
) mais avec un décalage entre le lien et ces images... 
Donc ma question, après avoir raconté ma vie, est:
comment afficher une image de fond dans un bouton sous Safari ou comment corriger l'alignement?
En vous remerciant d'avance...
Modifié par Ryukisai (30 Sep 2006 - 11:59)
voilà je dois faire des boutons pour un générateur de formulaire, donc je fais mes boutons avec des "type=button" classique et je leur met une image de fond dans ma feuille de style:
background:url(image.gif)Sous Ie et FF tout va bien mais sous Safari, l'image ne s'affiche pas, il me met les boutons par défaut de safari...
quelle problème me direz-vous? et bien autour de ce bouton j'affiche des images (à gauche et à droite) pour "finir" le bouton... car mon image de fond ne fait que 1px de large afin que la taille de l'image s'adapte au contenu du "value" du bouton...
donc comme Safari n'aime pas les images de fond dans le bouton, je feinte en remplaçant le bouton par un lien auquel je met ma classe avec l'image de fond...
en gros, mon bouton:
<img src="image-gauche.gif" class="vam" width="9" height="25" /><a href="#" class="validation">annuler</a><img src="image-droit.gif" alt="" class="vam" width="9" height="25" />
les classes utilisées:
a.validation { color:#FFF; cursor:pointer; background:url(../image/bouton/validation-centre.gif) repeat-x; text-decoration:none; text-transform:uppercase; padding:6px 0px 9px 0px; line-height:25px; border:0px; vertical-align:top; margin:0px }
a.validation:hover { color:#FF6600; cursor:pointer; background:url(../image/bouton/validation-centre.gif) repeat-x; text-decoration:none; text-transform:uppercase; padding:6px 0px 9px 0px; line-height:25px; border:0px; vertical-align:top; margin:0px }
* html a.validation {padding:6px 0px 9px 0px; vertical-align:middle}
* html a.validation:hover {padding:6px 0px 9px 0px; vertical-align:middle}
Et là sous Ie et FF, ben tout marche niquel aussi à part des petits décalages que j'adapte dans ma css en fonction des deux...
sous Safari, tout s'affiche (ouais c'est cool
) mais avec un décalage entre le lien et ces images... Donc ma question, après avoir raconté ma vie, est:
comment afficher une image de fond dans un bouton sous Safari ou comment corriger l'alignement?
En vous remerciant d'avance...
Modifié par Ryukisai (30 Sep 2006 - 11:59)
