Problème dans l'alignement verticale du texte d'un input type text.

Salut tout le monde,
je suis nouveau sur le forum, et j'ai besoin de votre aide.
J'ai un problème sur un input type text dans laquelle le texte dedans ou l'attribut placeholder, qui s'affichent sur IE8 non centrés verticalement, mais le client demande qu'ils s'affichent comme sur chrome aligné verticalement au centre, merci de me dire quel instructions je peux utiliser pour résoudre ce soucis.



Merci d'avance
Modifié par YBouamar (26 Nov 2014 - 18:07)

Bonjour,

Il est très utile que tu postes en même temps ton code CSS (juste le bout concerné) afin que nous puissions t'aider au mieux...

Pour le centrage horizontal un text-align:center; devrait faire l'affaire et pour le centrage vertical il y a plusieurs solutions (line-height, padding...) selon le CSS que tu as déjà appliqué pour te retrouver avec un espace en dessous...

j'ai testé line-height, les paddings, et le vertical-align rien n'a corrigé le truc.
voici le code concernant l'input:

.fnb_navigation .fnb_searchzone .fnb_searchbox .fnb_searchfield .fnb_searchinput{
display: inline;
width: 215px;
height: 30px;
margin: 0;
padding: 0 10px;
border-radius: 0;
border: 1px solid #999999;
}

mmmmmmm ça sent bon le code généré avec un hack pour avoir un placeholder sur IE8 en Javascript (http://caniuse.com/#feat=input-placeholder) non ?

Il cible quel élément ce css ? T'as le code html généré ? Genre le .fnb_searchinput c'est l'input en lui même ou une div ?

.fnb_searchinput c'est un <input>

Il doit y avoir quelque-chose d'autre alors.... normalement IE8 ne reconnait pas placeholder donc il doit y avoir un autre truc généré à la place pour en donner l'illusion et du coup tu as beau modifier cette classe ça n'influe pas sur le bon élément... si tu met un color:red; dans ta classe le texte passe il en rouge ? Et sur les autres navigateurs ?

C'est dur de déboguer du IE8 !

oui même sur ie8 si je donne l'attribut color:red; à fnb_searchinput, le texte devient rouge

c'est bon! merci infiniment pour votre aide, j'ai réussis à faire le truc en utilisant juste line-height mais avec un renforcement.

Meeeeerciiiiiiiiiiiiiiiiiiiiiii

Ah bah j'y suis pas pour grand chose ! Bien joué