IE 5 Abstand erreichen

[AllesMeins]

Hiho,

mal wieder ein CSS Problem. Folgende Situation: Ich möchte eine Reihe von radiobuttons links untereinander angeordnet haben und dann rechts daneben eine Beschriftung. Diese Beschriftung soll aber unterschiedlich weit eingerückt werden (damit soll für eine Art Ordnerstruktur angedeutet werden welcher "Ordner" welche "Unterordner" enthält). Ich dachte mir: "das müsste doch mit CSS recht einfach zu lösen gehen" - weit gefehlt! Ich habe also meine radiobuttons genbastelt, daneben den Text in ein <span></span> eingepackt und dem guten Ding dann untersdchiedlich grosse margin-left verpasst. Das funktioniert auch im Mozila wunderbar und (wie fast immer) im IE nicht. Der IE scheint das margin nur zu akzeptieren wenn das Element ein block-Element ist. 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.
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?

grüsse

Marc

[Nur-Titel-Leser]

Ja, vom IE 5 sollte man Abstand zu erreichen versuchen!!!

NTL

[Schuer]

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?

hast du mal ein padding-left:20px; oder ein position:relative; left:20px; statt eines margins probiert?

Viele Grüße!
_Dirk
DECAF°

[wahsaga]

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

[AllesMeins]

Hiho,

danke das klappt!

Grüsse

Marc