Checkboxen darstellung

C

cssfan

Hallo,
ich habe mehrere checkboxen die untereinander dargestellt werden. Im Ie6/7 sieht es ok aus aber im FF wird der Text falsch ausgerichtet.
Wie kriegt man es überall gleich angezeigt? Kann man evtl. meinen code vereinfachen?

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{
	margin:0;
	padding:0;
}

html {
	width:100%;
	height:100%;
}

body {
	width:100%;
	height:100%;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
}

.check{
	margin:10px 0 0 0;
}
input.checkbox{
	display:block;
	float:left;
}

.check span{
	line-height:20px;
}


</style>
</head>

<body>

<form action="#">
   <div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">		<span>Salami</span></div>
   <div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">		<span>Pilze</span></div>
   <div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">	<span>Sardellen</span></div>
</form>


</body>
</html>
 
Hi,

wenn der Text ohne das <span>-Element notiert wird, bzw. die Angabe zur Zeilenhöhe entfernt wird, zentriert ihn auch Firefox in der Vertikalen neben der Checkbox.

Gleiches gilt hier übrigens für den IE8, und alle anderen aktuellen standardkonformen Browser.

Daraus folgt diese Änderung, damit IE6 und IE7 den Text weiterhin vertikal zentrieren:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{
    margin:0;
    padding:0;
}

html {
    width:100%;
    height:100%;
}

body {
    width:100%;
    height:100%;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
}

.check{
    margin:10px 0 0 0;
}
input.checkbox{
    display:block;
    float:left;
}
</style>

<!--[if lt IE 8]>
<style type="text/css">
.check span{
    line-height:20px;
}
</style>
<![endif]-->
</head>

<body>

<form action="#">
   <div class="check"> <input type="checkbox" name="zutat" value="salami" class="checkbox">        <span>Salami</span></div>
   <div class="check"> <input type="checkbox" name="zutat" value="pilze" class="checkbox">        <span>Pilze</span></div>
   <div class="check"> <input type="checkbox" name="zutat" value="sardellen" class="checkbox">    <span>Sardellen</span></div>
</form>


</body>
</html>


mfg Maik
 
Zurück