IE und width / min-width

[TZP]

Moinz.

Warum....warum wieder mal nur der IE? Es ist zum kozzn....und so sieht es aus: Ich hab 4 Labels und 4 Dropdowns. Label links, DD rechts daneben. Nächste Zeile, Label links, DD rechts daneben usw.

Der CSS ist nice und easy:

.lab label {
padding-top:3px;
float:left;
width:115px;
}

.lab select {
margin:0px;
padding: 0px;
min-width:260px;
}

Und eine Label-DD-Kombi sieht so aus:

<label>Drittes Feld</label>
<FORM METHOD="GET" ACTION="testresult.html"
<SELECT NAME="df" CLASS="form" onChange="form.submit(); return true;">
<OPTION VALUE="Waffe 01" SELECTED>Waffe 01
<OPTION VALUE="Waffe 02">Waffe 02 und Schild 01
<OPTION VALUE="Waffe 03">Waffe 03 und Boden 01 und Schild 01
</SELECT>
<NOSCRIPT><INPUT TYPE="submit" VALUE="Go!"></NOSCRIPT>
</FORM>

Jetzt das Problem. Jeder Browser (FF, Chrome, Opera, Safari) macht ein schönes Bild.

Erstes Feld |Text01______|
Zweites Feld |Text02_____|
Drittes Feld |Text03______|
Viertes Feld |Text04______|

Gut, das sieht nich 1:1 aus aber es soll verdeutlichen, dass alles in Reihe und angeordnet ist. Der IE dagegen macht Kraut und Rüben daraus:

Erstes Feld |Text01_________|
Zweites Feld |Text02__|
Drittes Feld |Text03______|
Viertes Feld |Text04_____________|

So in etwa. Die länge des DDs ist abhängig vom längsten Element innerhalb der Auswahlliste. Das der IE6 nicht klarkommt, war abzusehen. Wenn ich aber eine width angebe, sind zwar alle DDs gleich lang aber längere Elemente, die über 260px gehen, werden am Ende abgeschnitten und nicht angezeigt und das ist auch doof.

Lässt sich da irgendwas reißen oder ist der IE mal wieder der Sargnagel des Tages?

-bedank-
TZP

 

[Efchen]

Der IE hat mit min-/max-width Probleme. Da gibts aber Möglichkeite, ich hab nur grad nichts parat. Das wird aber sicher noch jemand beisteuern ;-)

Aber Frage zum HTML: Was soll das <label> außerhalb des Formulars ohne Bezug zu einem Eingabefeld? Das ist sinnfrei. Labels bezeichnen ein Eingabefeld, machen somit nur Sinn innerhalb eines Formulars und haben das Attribut "for", mit dem die Beziehung zum Eingabefeld hergestellt wird. Das fehlt bei Dir, also macht <label> an der Stelle keinen Sinn.

 

[TZP]

Da haste nich unrecht mit, das muss ich noch reinschreiben.
Die Unsterblichkeit für denjenigen, der jeden IE an FF-Standards anpasst. ^^

 

[TZP]

So, ich hab erst ma ne Alternativlösung gebastelt. Die Idee: Die Dropdowns bekommen anscheinend die Mindestbreite von ihrer längsten Auswahlmöglichkeit. Das zweite Dropdown hat den längsten Eintrag. Also habe ich die Breite der anderen DDs mit width: nach oben geschraubt, bis sie mit dem zweiten DD bündig sind. Das sieht dann in etwa so aus:

Feld1: |Waffe01____________|
Feld2: |Waffe02 und Bogen 01|
Feld3: |Schild______________|
Feld4: |Item Nummer X______|

Lustigerweise zeigen Opera und Chrome bei Feld2 zwei/drei Pixel mehr nach rechts raus aber damit kann ich leben, da FF und IE nun bündig sind. ^^

TZP