[Résolu] Problème firefox : line-height ne fonctionne pas !

Bonjour à vous !

J'ai commencé à faire un site spip sous ie7 et j'ai downloadé firefox et opera pour la compatibilité :

grosse frayeur : pas le splashscreen attendu jusqu'au moment où j'ai compris que le z-index devait être en positif et pas en négatif, même pour mettre "en dessous" (il faut en fait n'avoir que des z-index positifs dans son css et soulever plus haut le bloc recouvrant au lieu de mettre en negatif les bloc qui passent en-dessous )

Mais voici ce qui m'inquiète : sous ie7 et opera j'ai un bloc de recherche dont le texte est centré grâce au line-height. Sous firefox le line height n'a aucun effet, pire si je met le texte plus petit il se rapproche du haut du cadre. En fait ça c'est si mon bloc est en position absolute; parce que sinon le background-image etait décalée vers le bas !

Voici le bout de html :

<li id="search">
<div class="formulaire_spip formulaire_recherche">
<a name="formulaire_recherche" id="formulaire_recherche">
</a>
<form action="http://127.0.0.1/spip_machinima/spip.php?page=recherche" method="get">
<div>
  <input name="page" value="recherche" type="hidden">
<label for="recherche">
Search
</label>
  <input class="forml" name="recherche" id="recherche" value="Search" onfocus="this.value='';" type="text">
</div>
</form>
</div>
</li>

et le bout de css correspondant :

li#search {
	position: absolute;
	right: 220px;
	top: 4px;
	padding: 0;
	margin: 0;
}

label {
	display: none;
}

input.forml {
	position: absolute;
	font-family: Verdana, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-size: small;
	border: 0px;
	background-image: url(recherche.png);
	background-color: transparent;
	height: 20px;
	line-height: 20px;
	width: 195px;
	margin: 0;
	padding: 0;
	padding-left: 5px;
	border-style: none;
}

Si vous arrivez à comprendre pourquoi firefox joue la java avec mon bloc de recherche, la position de son texte et de son image de fond vous êtes les bienvenus !
Modifié par Black_Jack (13 Aug 2007 - 15:38)

J'ai toujours fait les centrages verticaux par l'intermédiaire d'un padding top et bottom. En plus, en le mettant en em, il reste constant par rapport à la police quelque soit la taille.

Si je le centre avec un padding-top, c'est bon sous ie7 et firefox, mais c'est opéra qui me décale le texte vers le bas d'autant de pixel que le padding.

Bon j'ai trouvé une solution : j'ai viré le height et le line-height de mon input et à la place j'ai mis un border-top et un border bottom. Ce que je ne m'explique pas c'est que le premier est de 2px et le second de 3, mais bon puisque j'ai tout le background-image et que mon texte est correctement centré sur ie7, firefox et opera...

Voici le code css :

input.forml {
	position: absolute;
	font-family: Verdana, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-size: small;
	border: 0;
	background-image: url(recherche.png);
	background-color: transparent;
	background-repeat: no-repeat;
	width: 195px;
	margin: 0;
	padding: 0;
	padding-top: 2px;
	padding-bottom: 3px;
	padding-left: 5px;
}

Modifié par Black_Jack (13 Aug 2007 - 15:39)