[Résolu] Line-height sous Firefox ?

Bonjours

Désolé de vous importuner avec ma question mais j'aimerais vraiment la résoudre
Voici mon code :

#monForm p{
	width: 160px;
	float: left;
}

#monForm label{
	background-color: #FFCC66;
	width: 160px;
	text-align: left;
	height: 24px;
	margin: 0px;
	padding: 0px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
}

#monForm input{
	width: 160px;
	border: none;
	text-indent: 10px;
	float: left;
	margin: 0px;
	padding: 0px;
	height: 24px;
	background-color: #CCCCCC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 24px;
}

<form id="monForm" action="./index.php" method="post">
<fieldset>
<p><label for="teste">teste : </label>
<input type="text" name="teste" id="teste" value="" /></p>
</fieldset>
</form>

j'ai utilisé line-height: pour centrer verticalement le texte dans les inputs
cela fonctionne très bien sous IE mais pas sous FF ?
les labels par contre ça roule !

merci de m'aider
Modifié par olimann (14 Jan 2010 - 02:00)

Salut,

olimann a écrit :
j'ai utilisé line-height: pour centrer verticalement le texte dans les inputs

Une solution consiste à ne pas préciser de height mais de se servir de padding.

Par exemple (en refactorisant un peu ton code au passage ) :

#monForm p { 
    font-family: Arial, Helvetica, sans-serif; 
    width: 160px; 
    float: left; 
    text-align: left; 
} 
 
#monForm label, #monForm input { 
	font-size: .9em;
    padding: 7px 4px;
    width: 160px; 
    text-align: left; 
    margin: 0px; 
    float: left; 
} 
 
#monForm label { 
    background-color: #fc6; 
} 
 
#monForm input { 
    border: none; 
    text-indent: 10px; 
    background-color: #ccc; 
} 

Merci pour ta réponse
oui, mon code est cracra désolé je vais faire des efforts en refactorisation !
Modifié par olimann (14 Jan 2010 - 01:04)

olimann a écrit :
oui, mon code est cracra désolé

Ce n'est pas du tout ce que j'ai dit.
Simplement il existe quelques astuces telles que l'utilisation de virgules (comme dans #monForm label, #monForm input) ou le fait que certaines propriétés CSS affectées à un élément parent sont héritées par les éléments descendants (par exemple font) qui permettent de factoriser le code, ce qui le rend plus lisible et facile à maintenir.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.