28172 sujets

CSS et mise en forme, CSS3

[ Résolu ] Style sur une balise bouton

Bonjour à tous,

je me permet de vous demander assistance car j'ai un petit problème de boutons... je vous rassure rien de contagieux !! Smiley lol

En fait j'ai deux type de boutons que je voudrais rendre jolis, un vrai et un faux...
Le faux c'est une balise <a> que je déguise en bouton de formulaire et pas de soucis...

Le vrai c'est une balise <bouton> que je voudrais rendre identique au faux bouton...
Sous Ie7 et Chrome tout va bien, mais sous FF j'ai un léger décalage que je n'arrive pas à dompter !
upload/30049-boutons.gif

Et voici mon code : 

.button { color:#3399ff; font-size:11px; font-family:Arial, Helvetica, sans-serif; background:url(a.gif) top right no-repeat; display:-moz-inline-stack; display:inline-block; height:19px; line-height:19px; padding:0px 5px 0px 0px; text-decoration:none; white-space:nowrap; cursor:pointer; }
.button:hover { color:#0066ff; font-size:11px; }
.button span { background:url(span.gif) top left no-repeat; display:-moz-inline-stack; display:inline-block; text-transform:none; height:19px; line-height:19px; padding:0px 4px 0px 15px; margin:0px; }
.button:hover span { text-decoration:underline; }
button.button { overflow:visible; width:auto; border:none; margin:0px; }




<div style="margin-bottom:5px;"><a href="javascript:void 0" class="button"><span>Faux bouton</span></a></div>
<div><button type="submit" class="button"><span>Vrai bouton</span></button></div>


J'ai beau retourner ça dans tous les sens, pas moyen de caler l'image de droite correctement avec FF...
Auriez-vous une idée pour mon petit problème d'acné? Smiley cligne
Merci de m'avoir lu
Modifié par Speirs (08 Jun 2010 - 12:31)
oulala que de code pour si peu de chose Smiley confused
as-tu réellement besoin que ce faux bouton soit un <a>? ne peux tu pas en faire un bouton tout bête:

<div style="margin-bottom:5px;"><input type="button" class="button"><span>Faux bouton</span></input></div> 
<div><input type="submit" class="button"><span>Vrai bouton</span></input></div>

et rajouter ton javascript(s'il-y-a) en onclick=""
?
les deux boutons serait du même type et il n'y aurait plus de raison à ce décalage dont, je suis désolé, je ne peu t'expliquer la cause.
Salut e-rwan,

merci pour ta réponse,
mais le fait est que le problème vient de la classe appliquée sur le <bouton> et non sur le <a>.
Autrement dit c'est le vrai bouton qui me pose soucis...

Et j'ai bien essayé avec un <input> à la place du <bouton> mais le résultat est sensiblement le même...

Je pense que tu as un peu inversé le problème ! Smiley cligne
Bonjour à toi Speirs,

Je travaille aussi sur la balise "button" et j'ai exactement le meme probleme que toi. Pour le moment, je n'ai pas trouvé la solution.

La balise "button" a l'air d'ajouter des marges intérieures par défaut, meme si on met le margin et le padding à 0.

Mais si tu l'as trouvé, tiens moi au courant.

Merci par avance
Hello,

Ce sont les styles par défaut de ton chrome.css de ton Firefox qui causent ce probleme.
Essaie avec :
button.button::-moz-focus-inner { padding:0; margin-top:-1px; margin-left:-1px; }


J'avais eu ce problème aussi en tentant de faire la même chose que toi. Mais dans mes souvenirs, le même problème apparaissait sous Chrome ?

[HS]
Tu peux n'utiliser qu'une seule image de fond pour ton <a> et ton <span>, il suffit de les positionner l'une en dessous de l'autre et jouer avec le background-position (cf. CSS Sprites).
Cela t'économise une requete sur le serveur.

J'ai pour ma part laissé tomber cette technique et suis passé à du full CSS3 (border-radius, gradient, et autre box-shadow) pour faire mes boutons.
Tu peux tester si tu veux, ça "degrade gracefully" (ou alors ça "enhance progressively" ? Je sais jamais Smiley smile )
[/HS]
"Eurêka !" s'écria Archimède en se brulant les fesses dans son bain trop chaud !!

Cela fonctionne à merveille !
Il m'a fallut un calage en plus mais la solution est bien là !
::-moz-focus-inner { padding:0; margin-top:-1px; margin-left:-1px; margin-right:-1px; }


Merci pour cette astuce sortit du néant !! Smiley clapclap
Par contre je n'avais ce problème que sous FF, Chrome ne bronchait pas d'un poil...
En tout cas merci bien, je ne pense pas que j'aurais trouvé cette astuce seul...

Là j'ai envi de dire :"classe man! Top of the pop !"

[HS]
Certes oui j'aurais pu utiliser qu'une image, mais je suis fainéant...
Non en fait c'est une vieille technique de sioux qu'on a pas vraiment mis aux gouts du jour...

Pour le CCS3 crois bien que j'aurais aimé m'y adonner, mais je dois aussi rendre ça joli sous IE... snif
[/HS]
Modifié par Speirs (08 Jun 2010 - 12:32)
Sujet clos
Aller à