[resolu] Position texte à l'intérieur d'un input de type=text

Bonjour à tous,

Voilà encore une autre problématique entre navigateur..? Ha je vous jure à chacun sa petite cuisine et aux développeurs de se démerder.....

Bref..?

J'ai créé un formulaire de recherche comme vous le voyer sur le site alsacréations avec seulement deux input (text et submit) jusque là bon rien de bien compliquer j'ai fait mon css mis les image à l'intérieur des input jusque là tout est ok, et quand je visionne avec firefox le texte à l'intérieur se trouve positionné correctement vers le bas mais..? Avec IE le texte à l'interieur lui se retrouve décaler ver le haut.....

Le problème : est que si j'utillise padding pour positionner le texte sur IE et bin cela décale le texte sur firefoxe alors que faire et qu'elle est la solution car..? sans l'image à l'intérieur il sont tous les deux positionné la même chose.....

Dans l'attente de trouver la solution merci d'avance de votre aide futur.....

<div id="recherche">
   <form  method="get" action="#" id="q" />
    <input name="cherche" type="text" onfocus="if(this.value=='Recherche...')this.value='';" onblur="if(this.value=='')this.value='Recherche...'" value="Recherche..." size="0" maxlength="0" />
    <input type="submit" value="" />
   </form>           
</div>

#recherche{
	position:relative;
	width:135px;
	height:25px;
}
#q{
	margin:0 auto;
}
#q input[type=text]{
	float:left;
	border:0;
	width:110px;
	height:25px;
	background:url(/images/barre_recherche.png) no-repeat top left;
	font-size:10pt;
	color:#CC0000;
	padding:0 0 0 5px;
}
#q input[type=text]:hover{
	background-position:left bottom;
}
#q input[type=submit]{
	float:left;
	border:0;
	width:21px;
	height:25px;
	background:url(/images/barre_recherche.png) no-repeat top right;
	cursor:pointer;
}
#q input[type=submit]:hover{
	background-position:right bottom;
}

Modifié par lezarts (18 May 2010 - 17:22)

Bonjour à tous,

J'ai trouvé la solution à mon problème et pour ceux qui se trouveraient avec le même soucis voilà la solution :

Il suffisait de mettre l'instruction line-heigth

#q input[type=text]{     
float:left;     
border:0;     
width:110px;     
height:25px;     
background:url(/images/barre_recherche.png) no-repeat top left;     
font-size:10pt;     
color:#CC0000;     
padding:0 0 0 5px; 
line-height:25px;
} 

Modifié par lezarts (23 May 2010 - 00:08)