✔ Problem mit line-height im Firefox

[Ch]

Hallo,
wie der Tittel schon sagt habe ich ein Problem mit den CSS Attribut line-height. Im Firefox ist die Schrift des Inhaltes einer Textbox nach oben verschoben(siehe Grafiken). der Tip von css4you den Wert ohne Einheit anzugeben brachte auch keine Ergebnis. Hat jemand eine Idee wie ich es lösen kann? Anbei der zugehörige Css Abschnitt.

Danke

/*SEARCH*/
#SEARCH {
	position: absolute; left: 250px; top: 15px;
}
#SEARCH input.text {	
	width: 257px; height: 22px;
	float: left;
	background:transparent url(search_bg.png) no-repeat;  
	border:0px;
	text-indent: 10px;
	line-height: 20px;
}
#SEARCH input.button {
	width: 22px; height: 22px;
	background:transparent url(search_btn.png) no-repeat;
	color: transparent;
	border: 0px;
}
#SEARCH input.button:hover {
	background-position: bottom;
}
/*LOGIN*/
#LOGIN {
	position: absolute; left: 627px; top: 5px; width: 500px;	
}
#LOGIN span {
	display: block; height: 10px; line-height: 0px;
}
#LOGIN span a {
	color: #808080;
	font-size: 11px;
	min-width: 95px;
	display: inline-block;
}
#LOGIN input.text {	
	width: 92px; height: 22px;
	float: left;
	background:transparent url(search_bg.png) no-repeat;  
	border:0px;
	text-indent: 10px;
	line-height: 20px;
}
#LOGIN input.text.name { 
	margin-right:5px;
	background: url(login_bg.png) no-repeat;
}
#LOGIN input.button {
	width: 22px; height: 22px;
	background:transparent url(login_btn.png) no-repeat;
	color: transparent;
	border: 0px;
}
#LOGIN input.button:hover {
	background-position: bottom;
}

 

[Maik]

Hi,

wenn du mal testweise die Höhe und Zeilenhöhe des Eingabefeldes aufstockst, wirst du erkennen, dass Firefox die line-height-Eigenschaft in diesem Elementtyp überhaupt nicht interpretiert.

Die alternative Umsetzung zur vertikalen Zentrierung könnte beispielsweise so aussehen:

#SEARCH input.text {	
	width: 257px; 
	float: left;
	background:transparent url(search_bg.png) no-repeat;  
	border:0px;
	text-indent: 10px;
	font-size:12px;
    padding:5px 0;
}

#LOGIN input.text {	
	width: 92px; 
	float: left;
	background:transparent url(search_bg.png) no-repeat;  
	border:0px;
	text-indent: 10px;
    font-size:12px;
    padding:5px 0;
}

mfg Maik

 

[Ch]

Danke für deine Hilfe Maik! Wie du ja weißt ist CSS ja nicht gerade mein Hobby.