alignement vertical du texte input type=submit dans Firefox

Question

J'essaie de styliser les boutons de mon formulaire et je rencontre un problème dans Firefox dont je ne parviens pas à...

Je veux styliser certains <a /> et <input type="submit" /> pour qu'ils aient la même apparence (j'ai une image d'arrière-plan de bouton, utilisant une technique de portes coulissantes pour appliquer un effet de survol).

Tout cela fonctionne parfaitement, sauf que dans Firefox, le texte de soumission de l'entrée est légèrement plus bas qu'il ne devrait l'être. IE et Safari/Chrome fonctionnent bien.

_{(source : <a href="http://blog.muonlab.com/wp-content/uploads/2009/11/b0rked-buttons.png" rel="nofollow noreferrer">muonlab.com </a>)}

Quelqu'un a une idée ?

Gracias

<div class="buttons">
    <a href="#" class="button btn-small-grey">&laquo Back</a>
    <input type="submit" class="button btn-large-green" value="Save changes" />
</div>

.button
{
    cursor: pointer;
    border: 0;
    background-color: #fff;
    color: #fff;
    font-size: 1.4em;
    font-weight: bold;
    outline: 0;
    font-family: Arial, Verdana, Sans-Serif;
}

a.button
{
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    padding: 5px 0 0 0;
    height: 22px;
    margin-right: 1em;
}

.btn-small-grey
{
    height: 27px;
    width: 96px;
    background-position: 0 -81px;
    background-image: url(/assets/images/buttons/buttons-small.gif);
}

.btn-large-green
{
    height: 27px;
    width: 175px;
    background-position: 0px -54px;
    background-image: url(/assets/images/buttons/buttons-large.gif);
}

Answer 1

J'ai trouvé ce message parce que j'avais résolu ce problème il y a quelques mois et quand je l'ai rencontré à nouveau aujourd'hui, je ne me souvenais plus de ce que j'avais fait. Bien. Après avoir passé en revue mes css, j'ai finalement trouvé la "solution". Je ne peux pas m'attribuer le mérite car je l'ai trouvé quelque part sur le web, mais j'espère qu'il vous sera aussi utile qu'il l'a été pour moi :

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

J'espère que cela vous aidera.

Answer 2

Les entrées sont formatées en ne suivant pas la convention du modèle de boîte W3 dans différents navigateurs, vous pourriez vouloir inclure :

input /*Content follows box model*/
{ 
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;

    height:24px;
}

Inclure également pour firefox (ce que Shelly a signalé) :

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

Sinon, vous pouvez utiliser le bouton

J'ai rassemblé toutes ces solutions à partir de diverses sources, elles méritent le crédit.

Answer 3

J'ai le même problème chaque fois que j'ai besoin de styliser des boutons de formulaire. Désolé, je suis très occupé en ce moment et je ne peux donc décrire que brièvement la façon dont je résous habituellement le problème.

Dans FF, le texte est généralement un peu plus bas, exactement comme sur l'image que vous avez jointe, et donc j'applique simplement "padding-bottom" sur le bouton lui-même. Cela déplace le texte du bouton d'un certain nombre de pixels vers le haut.

Le problème, c'est qu'il déplace également le texte dans IE, ce qui donne à IE un aspect un peu bizarre. Pour résoudre ce problème, j'applique "line-height" au même bouton avec exactement la même valeur que la hauteur du bouton. Cela permet à IE d'ignorer complètement le remplissage et de positionner le texte en plein milieu. Voici un exemple de code HTML :

<input type="submit" value="SEARCH" class="search"/>

et CSS :

.search
{
    background: transparent url(../images/sprites.gif) no-repeat -310px 0; /* some button image */
    height: 29px;
    width: 104px;   
    border: 0; 

    /* centering text on button */
    line-height: 29px; /* FF will ignore this but works for IE. This value should be same as value of the height property above */
    padding-bottom: 2px; /* IE will ignore but works for FF */
}

Désolé de ne pas l'avoir appliqué directement à votre code mais je suis un peu occupé en ce moment, j'espère que vous avez compris l'idée et que cela vous aidera.

ps. je viens de vérifier dans IE8 et tout ce qui précède déplace le texte de quelques pixels vers le haut. Cela signifie donc qu'il faut encore (sans fin ?) se moquer des rembourrages en haut et en bas J'ai perdu patience maintenant et je pense que je vais mettre tout cela dans une feuille de style séparée à partir de maintenant, jusqu'à ce que je trouve une solution assez facile et universelle pour tout cela.

Answer 4

J'ai eu le même problème et je l'ai résolu (seulement pour FF et Safari) en fixant la largeur mais pas la hauteur et en jouant avec les valeurs : padding (haut et bas), line-height et si nécessaire en mettant le vertical-align au milieu. Cependant, tout cela est plus facile à faire si vous définissez toutes les valeurs (même la taille de la police) en pixel.

---

EDIT : Je pense qu'il n'y a pas de solution inter-navigateur, car le problème est dû au rendu du texte des navigateurs. Pour résoudre complètement le problème, vous pourriez dessiner une image de fond avec du texte et appliquer cette image au lien ou au bouton. Même si avec cette solution vous perdez en accessibilité.

Vous pouvez également utiliser des instructions CSS conditionnelles pour améliorer la mise en page pour chaque navigateur.

Answer 5

Vous pouvez également envisager de remplacer le bouton par un élément totalement différent. L'élément anchor fonctionne parfaitement. Il suffit d'ajouter une fonction "submit" à son événement "onClick" et le tour est joué. Je pense qu'il s'agit d'une meilleure solution (et plus simple) pour les différents navigateurs.