AllesMeins: float Elemente hängen aneinander fest

Beitrag lesen

Hiho,

folgendes Problem. Ich habe ein Formular wie folgt aufgebaut:

<p><label for="titel" class="long_label">Titel</label><input type="text" id="titel" name="titel" value="" class="textfield_box" style="width:5em;" /></p>

<p><label for="name" class="long_label">Name</label><input type="text" id="name" name="name" value="" class="textfield_box" style="width:20em;" /></p>

usw...

Die zugehörigen CSS Anweisungen:

.long_label {
 display: block;
 width: 17em;
 float: left;
}

.textfield_box {
 color: #000000;
 background-color: #fff;
 padding: 0.1em;
 margin: 1px;
}

Und auf den ganzen Inhaltsbereich wirkt ein "line-height: 1.5em;". Und dieses bereitet mir Probleme. Wenn ich nun im CSS für den kompletten Bodybereich die Schriftgröße auf einen gewissen Wert setze dann bleiben die Formularfelder aneinander hängen. Also das erste steht ganz normal, das zweite label beginnt in der Zeile darunter erst am Ende des oberen, das dritte noch weiter versetzt usw.
Entferne ich das line-height dann funktioniert alles gut. Ich würde das ganze aber gerne drinne lassen. Habt ihr irgend eine Idee, wie ich dieses Verhalten verhindern kann?

Grüße

Marc