nicht angemeldet
hi,
Ich habe also meine radiobuttons genbastelt, daneben den Text in ein <span></span> eingepackt
na na, für zu formularelementen gehörende beschreibungen benutzen wir doch was? richtig, <label> - damit man auch auf den text klicken kann, um den radiobutton auszuwählen.
Also dem span auch noch ein display:block verpasst und den radiobutton mit float:left in der selben zeile gehalten. Das funktionierte im Mozilla auch wunderbar und (ihr könnt es euch denken) im IE nicht. Dieser scheint sich irgendwie an dem jeweils vorherigen Element zu orientieren und rückt jede Zeile (mit Beschriftung und radiobutton) immer weiter ein. Also dier erste Zeile ist normal, die zweite dann ~20 px eingerückt, die dritte ~40px usw.
Das Problem lässt sich allerdings lösen indem ich hinter jedes der </span> ein <br /> setze. Dann ist alles korrekt eingerückt, als Ausgleich dafür wird dann aber auch immer eine Leerzeile erzeugt, die ich auch nicht haben möchte.
bei mir funktioniert das im IE 5.01 auch, wenn ich die radiobuttons nicht nur links floate, sondern auch mit clear:left das float des vorherigen wieder aufhebe.
Also, lange Rede, kurzer Sinn: Wie kann ich (ohne Tabellen und ohne Abstandhalter Grafiken) am besten die Schrift einrücken, die radiobuttons aber fest am linken Rand lassen?
in etwa so?
input { float:left; clear:left; }
label { display:block; }
#label1 { margin-left:1em; }
#label2 { margin-left:2em; }
#label3 { margin-left:3em; }
#label4 { margin-left:4em; }
#label5 { margin-left:5em; }
<input type="radio" name="radio" id="radio1" /><label id="label1" for="radio1">text zum radiobutton #1</label>
<input type="radio" name="radio" id="radio2" /><label id="label2" for="radio2">text zum radiobutton #2</label>
<input type="radio" name="radio" id="radio3" /><label id="label3" for="radio3">text zum radiobutton #3</label>
<input type="radio" name="radio" id="radio4" /><label id="label4" for="radio4">text zum radiobutton #4</label>
<input type="radio" name="radio" id="radio5" /><label id="label5" for="radio5">text zum radiobutton #5</label>
gruß,
wahsaga
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }