Liste floatetnicht in IE6 und IE7

[David]

Hi,
ich habe folgendes Problem:

Ich habe eine Liste in die ich mehrere weitere Listen einbinden möchte.
Dabei ist eine rechts, eine links und eine gar nicht gefloatet.

Im Firefox, Chrome, IE8 läuft das auch wunderbar. Allerdings ignorieren IE6 und IE7 dies völlig.

Ich habe das Problem mal skizziert. Ihr könnt es euch aber auch hier mal in verschiedenen Browsern direkt anschauen.

Weiß jemand, wie ich das Problem lösen kann?

mfg,
David

[johjoh]

hi david,
also, dein code ist ziemliches chaos. ich habs jetzt so auf die schnelle nicht hinbekommen, aber es lohnt sich auch nicht, weil du am besten erstmal aufräumst: warum hast du eine eigene liste für das bild, mit nur einem eintrag? wenn du an der stelle listen verwendest, würde ich erstmal versuchen alle elemente von diesem block, um den es hier geht in in eine liste zu tun und den li-elementen ids zu geben, um das layout zu bestimmen.
dann: du brauchst nicht link UND rechts zu floaten. wenn das bild ein float: left hat reicht das. die daten floaten dann rechts dran vorbei.
und deine daten haben eine breitenangage von 204px die keinen sinn macht.

am besten du schaust dir irgendwo ein konzept an, wie man das cross-browser-kompatibel lösen kann. also zb. bei yaml.de

gruß,
johannes

[David]

wenn du an der stelle listen verwendest, würde ich erstmal versuchen alle »» elemente von diesem block, um den es hier geht in in eine liste zu tun und »» den li-elementen ids zu geben, um das layout zu bestimmen.

Danke für den Tipp. Die Möglichkeit kannte ich noch gar nicht. Bei mir heißt es "learning by doing". Und jetzt bin ich schon ein ganzes Stück schlauer.
Sieht jetzt durchaus auch etwas ordentlicher aus ;-) .

dann: du brauchst nicht link UND rechts zu floaten. wenn das bild ein float: left hat reicht das. die daten floaten dann rechts dran vorbei.
und deine daten haben eine breitenangage von 204px die keinen sinn macht.

Doch, die floats müssen so bleiben denke ich, weil die id="daten" ja nebeneinander angeordnet werden sollen, solange es passt. display:inline; kann ich aber nicht verwenden, weil ich nicht will, dass jedes Listenelement nur genauso so breit ist, wie es der Inhalt erfordert. Also sag ich einfach, dass die Daten rechts floaten sollen und dass das Element 204px breit sein soll. Dann füllen zwei Listenelemente genau den Raum zwischen Bild und Rand der Liste.
Oder hast du dafür auch eine elegantere Lösung?

mfg,
David

[johjoh]

Oder hast du dafür auch eine elegantere Lösung?

an der stelle würde es wiederum sinn machen eine weitere liste zu verwenden, also eine für den datenblock, weil der ja auch farbig unterlegt ist und eine "einheit" mit "unter-einheiten" darstellt. dann muss aber nicht die liste das float:right bekommen, wie in deiner ersten version, sondern die list-items (li).
also sowas wie
<ul>
...
<li class='bild'>...</li>
<li class='daten'><ul>...</ul></li>
...
</ul>

und dann kannst du über
ul.haus li.daten ul li { float: right; }
das entsprechende floaten einstellen.

aber wenn's so funktioniert, kannst dus eigentlich auch so lassen ;-) ...falsch ist es nicht.

gruß, johannes