[Résolu] [Firefox] line-height sur un input[type=text]

Bonjour à tous,

En fait j'ai un input pour lequel je spécifie une grande hauteur (30px).
Je suis assez surpris, j'ai l'impression que le line-height ne fonctionne pas pour les input[type=text] sous FF (3.0.10), du coup, impossible de centrer le texte (en fait je veux pas vraiment le centrer, disons que j'ai une image en fond de l'input qui n'est pas "centrée" verticalement)
J'utiliserais bien les padding, mais pour le coup c'est sur Safari que ça plante puisqu'il centre le texte par défaut, donc si je rajoute un paddin-top, le texte se retrouve plus bas que sur les autres navigateurs.

Si quelqu'un a une piste pour comprendre pourquoi ça ne fonctionne pas sur FF, et comment faire pour contourner le problème... Je suis preneur
(pour l'instant j'ai une solution "à peu priste" un peu crade avec un tout petit padding)

Merci à tous !
Modifié par Lideln (26 May 2009 - 20:37)

En fait plutôt ce post pourrait être renommé en :
[Safari] Pourquoi le texte est-il centré verticalement dans un input[type=text] ? Ca cause des problèmes avec le padding, alors que sur tous les autres navigateurs ça fonctionne bien.

up

up ! "blablabla du texte pour que ça passe le post..."

Hello,

#blabla .contexte input[type="text"] {
    height: 12px;
    padding: 9px 6px 9px 6px;
    background: url(...);
}

Hop, un input de 30px de haut. Si le texte fait dans les 12px de haut, eh bien ça donnera un rendu proche dans tous les navigateurs. Avec un texte plutôt dans les 10px de haut, il peut y avoir de petites différences.

D'expérience, on échappe rarement à des petites différences ou incohérence d'alignement vertical des éléments de formulaire et des textes qu'ils contiennent. Si on souhaite un alignement vertical parfait au pixel près (ou même à un pixel près), on aura intérêt à prendre une aspirine et aller se coucher.

Waouw Florent V. tu as fait un carton dans les topics à ce que je vois !

Merci pour l'astuce, je testerai demain car c'est un problème que j'ai au boulot. Et si ça ne marche pas, je te posterai l'exemple complet.

Ben, au pixel près ce serait super ! Mais sans aller jusque-là (quoique...), là je crois que j'ai genre 6px d'écart. Genre sur un navigateur, le texte est tout en haut de la boîte, et sur l'autre, il est tout en bas

Je teste ça lundi matin et je te dis !

Merci

PS : ouais, perso je suis partisan de coder en respectant les standards, ensuite c'est aux navigateurs de s'adapter, pas à nous... mais bon, la loi de l'argent : si on se casse pas la tête pour rendre compatible avec les pires navigateurs (IE6), personne ne veut de l'appli... Ca me fait halluciner, c'est comme si on disait à un concessionnaire "je veux que la voiture que vous me vendez marche avec du crottin de cheval en guise de carburant", c'est ridicule... Bref je m'égare

Ralalaaaa, simple comme bonjour, et ça marche impeccable !

Merci vraiment de m'avoir éclairé, je me sens tout bête, mais bon ça fait plaisir quand même