Hallo,
ich find grad keine Lösung für ein kleines Float-Darstellungs Problem. Ich hab unterschiedlich viele Radiobuttons mit kurzem erklärendem Textlink daneben. Diese sollen immer so dargestellt werden, dass ein <span>, welche den Button und den Textlink enthält, entweder in eine Zeile passt oder erst in der nächsten Anfängt:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fieldsettest</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
fieldset {
overflow: auto;
}
fieldset span {
float: left;
margin-left: 1em;
}
</style>
</head>
<body>
<fieldset>
<legend>Diverses</legend>
<h3>Bitte wählen Sie etwas aus:</h3>
<span><input type="radio" name="asd" value="asd" />Hier steht ein Name</span>
<span><input type="radio" name="asd" value="asd" />Hier steht ein anderer Name</span>
<span><input type="radio" name="asd" value="asd" />Hier steht Hallo</span>
<span><input type="radio" name="asd" value="asd" />Tag auch</span>
<span><input type="radio" name="asd" value="asd" />noch ein Radiobutton</span>
</fieldset>
</body>
</html>
Im FF und Opera wird der gesamte Inhalt des <span> bei verkleinern des Fensters in eine neue Zeile gefloatet. So soll es sein.
Im IE erscheint ein Umbruch innerhalb des <span> und es bildet sich ein unschöne Stufe. Der Effekt ist auf dem screenshot gut zu erkennen.
Hab ich was übersehen oder ist dies ein "reines IE-Problem" (Ditsche...)? Und wie lässt sich das beheben, so das der gewünschte Effekt auf den Browsern gleich (gut) aussieht.
Mit display: inline wird ja innerhalb des Elements umgebrochen und da es je nach genereierung unterschiedlich viele Buttons und unterschiedlich lange Textlionks dazu gibt, kann ich umbrüche oder zwischenzeitliche clears nicht hart eingeben.