28172 sujets

CSS et mise en forme, CSS3

Effet "push-button" sur input[type=submit] (IE8)

Bonjour,

Lorsqu'on clique sur un INPUT (SUBMIT) sur Internet Explorer, le texte du bouton se décale de 1 ou 2 pixels vers la gauche et le bas. Connaissez vous un moyen avec CSS de se débarrasser de cet effet stupide et hors d'âge ?

J'ai redéfini complètement le style de mes input[type=submit], (border, padding, margin, etc) et c'est OK sur tous les navigateurs sauf évidemment IE (v7 ET v8).

D'autant plus que si vous définissez une image background (et c'est mon cas), l'image elle, se décale dans le sens inverse du texte et sort du cadre du bouton. C'est très laid !

Merci
Bonjour,
Alors voilà ce que j'ai défini pour mes boutons :

input[type=image], input[type=submit], input[type=checkbox] {cursor:pointer; outline:none;}
input[type=submit] {height:20px; border:none; padding-bottom:1px;}
input[type=submit] {text-align:center; font-size:11px; color:#333333;}
input[type=submit].btn60 {width:60px; background:url(img/css/btn60.png) no-repeat top left;}
input[type=submit].btn100 {width:100px; background:url(img/css/btn100.png) no-repeat top left;}
input[type=submit].btn100r {width:100px; background:url(img/css/btn100r.png) no-repeat top left;}
input[type=submit].btn130 {width:130px; background:url(img/css/btn130.png) no-repeat top left;}


C'est nickel sur Safari, Opera et Chrome.

Sur Firefox, j'ai juste un petit pb avec le titre du bouton qui s'affiche un peu bas et impossible de le centrer avec vertical-align:middle (tout ce que j'ai trouvé à faire, c'est un petit padding-bottom qui compense un peu...)

Par contre sur IE, mon principal souci c'est cet effet moche quand on clique sur le bouton : le titre se décale d'un ou 2 pixels vers le bas et la gauche alors que l'image de fond elle part dans l'autre sens...

Si quelqu'un voit de quoi je veux parler... D'ailleurs il suffit de voir ce site (Alsacreation) sous IE, par exemple les boutons submit "Envoyer" et "Prévisualiser" de réponse à un sujet. Je vois qu'ils ont été définis différemment pour IE et les autres navigateurs : par défaut une image background (rectangle vert arrondi) et pour IE, juste une couleur de fond mais pas d'image background.
Sujet clos
Aller à