[Résolu] Problème d'alignement du texte d'un input

Bonsoir,

J'ai un petit soucis avec un input personnalisé :

Voici mon HTML :

			<div class="menu_vertical search">
				<form action="search.php" method="post">
					<p><input type="text" value="Rechercher" name="search" id="input_search" /></p>
				</form>
			</div>

Voici mon CSS :

.menu_vertical, .mv_top, .mv_milieu, .mv_bottom {
	width: 240px;
}

.menu_vertical {
	margin: 0px 0 0 780px;

}

#input_search {
	width: 220px; 
	height: 30px;
  	padding: 0 20px 0 40px; 
	border: 0;
  	background:  url(images/input-search.png) left top no-repeat;
}

Sous tous les navigateurs, ça s'affiche bien :

http://pix.toile-libre.org/upload/img/1297625231.png

Seulement, sous Firefox Linux, voici ce qu'il m'affiche :

http://pix.toile-libre.org/upload/img/1297625763.png

Je précise que sous Firefox Windows, aucun soucis... Bizarre non ?

Avez-vous une idée pour savoir d'où ça vient ?

Bonne soirée !
Modifié par Jeoffrey54 (13 Feb 2011 - 22:14)

Bonjour,

padding: 0 20px 0 40px;

Firefox linux est surement le seul à respecter la padding 0 dans ton input

La meilleure solution pour centrer verticalement le texte dans le input c'est de fixer un font-size et d'appliquer un padding en conséquence.

genre si font-size est égal à 10px et input height à 30px :

padding: 10px 20px 10px 40px;

Excuse moi, je comprends pas...

J'ai bien mis :

padding: 10px 20px 10px 40px;

Et ça s'affiche bien que sur mon Firefox Linux... Mon input height est bien à 30px, et mon font-size à 10pt.

10pt ou 10px ?

10pt .

Pourquoi utiliser des "point" sur un champ de recherche qui n'a pas vocation à être imprimé ?

Tu fixes une height en px pour ton input et une font-size en pt, c'est un peu bancal je trouve, ou l'un ou l'autre mais pas les deux.

A moins bien sur que je sois dans l'erreur ce qui est possible, le texte ça reste encore l'un des mes défauts.

Merci rs459, tu m'a mis sur la piste .

Finalement, j'ai remis font-size: 15px; . En fait, j'avais un padding qui faisait que la hauteur était de 50 et quelques, d'où l'alignement foireux.

Maintenant j'ai :

#input_search {
	padding: 0;
	margin: 0;
	width: 200px; 
	height: 15px;
	padding: 8px 0px 10px 40px;
	border: 0;
  	background:  url(images/input-search.png) left top no-repeat;
}

Et ça marche nickel .

Merci de m'avoir aidé !
Modifié par Jeoffrey54 (13 Feb 2011 - 22:14)