Style input type submit, différences IE et FF

**Jolt0x** · 24/12/2014, 09h26

Bonjour,

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

Mes boutons sont :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

La classe boardbutton est :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Bovino** · 24/12/2014, 09h44

Tu as bien précisé un doctype ?
Ton IE n'est pas en mode quirks ?

Invité · 25/12/2014, 06h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**Jolt0x** · 25/12/2014, 18h26

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 ?

Invité · 25/12/2014, 23h15

"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.

**ryan** · 25/12/2014, 23h25

Yop!

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!

Invité · 25/12/2014, 23h32

@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.

**ryan** · 25/12/2014, 23h43

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]

Style input type submit, différences IE et FF

CSS

Vue hybride

Discussions similaires

Partager

Partager