Style input type submit, différences IE et FF

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

J'ai des boutons input de type submit sur lesquelles j'applique un style sous forme de classe CSS.

Mes boutons sont :
Code:

1 2 <input class= "boardbutton" type="submit" name="doLogin" value="Login" style="width:80px;">
La classe boardbutton est :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .boardbutton { border: none; background-color: #24A1DD; color: white; /* font-weight: bold; */ height: 25px; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; min-width: 10px; min-height: 10px; }
Le rendu sous IE est bien. En revanche sous FF, c'est un peu moins bien, le texte du bouton est un peu trop bas. J'ai essayé d'augmenter le margin-bottom mais si je le fait, sous IE la marge du bas (le margin-bottom) est trop importante. Je n'arrive pas bien a center sur les 2 navigateurs.

J'ai mis en en pièces jointes, les images des copies d'écrans du boutton sous IE et FF.

Je ne souhaite pas utiliser les balises HTML <boutton>, juste les inputs de type submit.

24/12/2014, 09h44
Bovino

Tu as bien précisé un doctype ?
Ton IE n'est pas en mode quirks ?
25/12/2014, 06h03
Invité
Bonjour,
vouloir imposer/figer des dimensions, à l'heure du "~~responsible~~ responsive", n'est plus vraiment d'actualité.

Et au lieu de "combattre" les navigateurs (qui ont parfois leur propre interprétation des règles CSS...), autant composer avec eux.
Code:

1 2 3 4 5 6 7 .boardbutton { border: none; background-color: #24A1DD; color: white; min-height: 25px; /* facultatif, mais si ça te fait plaisir... c'est Noël ! */ padding: 5px 15px; }
25/12/2014, 18h26
Jolt0x

Merci a vous deux.

Mon doctype est <!DOCTYPE html> et je ne suis évidement pas en mode quirks.

jreaux,

Responsible ou responsive ? 'Responsible' c'est 'responsable'. Pas 'sensible/répondant'.

Dans ton code, il n'y a aucune différence avec le mien excepté dans ta syntaxe des padding qui est plus synthétique. J'ai juste remplacé mon code CSS par le tien, (y compris en supprimant la ligne du min-height) et il y a du mieux. Sous FF, c'est mieux centré verticalement. Je ne comprends pas bien, ton code et le mien sont équivalents (sauf le min-height dont tu dis que ca n'a aucun impact). Non ?
25/12/2014, 23h15
Invité

"responsive", évidemment.

mais "responsible" marche aussi : on doit savoir ce qu'on fait... ;)

Ce que j'ai enlevé, c'est le height: 25px;, qui fixe la hauteur.
En l'enlevant, c'est le texte lui-même (et le padding) qui détermine les dimensions du bouton.

Tu peux t'en convaincre en mettant un font-size plus grand.
25/12/2014, 23h25
ryan

Yop!

Citation:

Envoyé par jreaux62

vouloir imposer/figer des dimensions, à l'heure du "~~responsible~~ responsive", n'est plus vraiment d'actualité.

Doux Jésus ( pas dans mes habitudes de faire appel à lui, mais c'est noël après tout) si mes clients pouvaient comprendre cela!
25/12/2014, 23h32
Invité

@ryan
Explique-leur que l'important en design, ce ne sont pas les dimensions, mais les proportions ;)

Un design "papier" est fixe et calibré (magazine, affiche...)
Un design "web" se doit d'être évolutif et adaptatif (différentes dimensions/résolutions des medias)

De nos jours, on ne fait plus UNE maquette pour le web, mais DES maquettes, suivant les différents supports (PC, tablette, Smartphone).
Ce qui n'empêche pas de suivre à la lettre une charte graphique précise.
25/12/2014, 23h43
ryan

Yop Jreaux,

[mode jérémiades on]
A chaque fois qu'ils me parlent pixels, je leurs réponds pourcents, mais le message a bien du mal à passer...
Je me demande parfois si certains clients ne veulent pas un site uniquement pour eux-même ( raccord avec LEUR navigateur et LEUR résolution ) et non pas un site pour le reste du monde.
Allez hop, j'arrête de pourrir ce post.
[mode jeremiades off]

Bonjour,

Code:

1
2
height: 2em;
line-height:2em;  // centrage vertical assuré