IE(6-8)-Bug beim clearen von Listen
Hi allerseits,
plage mich nun schon seit Stunden mit einem Problem rum, dass eine Sitemap - bestehend aus verschachtelten Listen - im IE nicht richtig angezeigt wird. Problem ist, dass mehrere Listen mittels "float: left" aneinandergereiht sind, ein clearer die nächsten Elemente dann in die nächste Reihe befördern soll. Das klappt außer im IE in allen anderen Browsern. Hier mal ein Screen vom FF, so wie es aussehen soll: http://img820.imageshack.us/img820/2973/sitemap1.jpg Hier ein Screen im IE: http://img840.imageshack.us/img840/6176/sitemap2.jpg Man sieht, dass die Liste nach dem clearer im IE nicht ganz nach links geschoben wird, sondern an der nächst-längeren Liste "hängen" bleibt. Gibt man den Listen eine Höhe, sodass alle gleich hoch sind, bricht die Liste im IE richtig um und schiebt sich ganz nach links. Eine fixe Höhe ist aber nicht erwünscht, die Sitemap sollt nämlich später dynamisch aktualisiert werden können. Hier habe ich den HTML-Code für die Sitemap: HTML-Code:
<!-- LEVEL 1 --> Code:
#sitemap ul { |
Deine clearer-Konstruktion ist nicht valide, das solltest Du als erstes beheben.
|
Meinst du, dass ich <div> zwischen Listen packe? Oder was genau ist nicht valide?
Kann auch dem Listen-Element selbst die Klasse "clear" geben, führt aber im IE genauso zu Darstellungsproblemen. |
Zitat:
Eine Alternative wäre noch, das Ganze nicht per float, sondern per inline-block zu lösen, dann entfällt das clear-Element eh komplett. |
Okay, wie gedacht spuckt der Validator das <div> aus, was zwischen den Listen steht. Das löst aber leider nicht das Problem, selbst wenn ich clearer in die Listen mache vergeigt der IE die Anzeige.
Die Listen sind ja bereits auf "inline-block" gesetzt. Welche Elemente müssen noch auf diesen Wert gesetzt werden? |
Wirf vorläufig mal jegliches float raus. Und inline-block brauchen ausschließlich die Kind-li von .lv2, denn das sind die Elemente, die das entsprechende Verhalten brauchen.
|
Ja, das gibt es. IE < 8 und FX < 3 kennen es zwar nicht, aber man kann es ihnen relativ leicht beibringen.
|
Wenn ich die ganzen floats raus nehme und für die Kind-Elemente von li.lv2 den "display: inline-block" setze, werden im IE alle Listen untereinander aufgeführt. Im FF stehen die Listen komischerweise noch nebeneinander, allerdings wie bei "vertical-align: bottom" unten angeordnet.
|
Eher "baseline" - aber vertical-align funktioniert bei inline-block, also kannst Du es auch wie gewünscht deklarieren.
Und dass der IE eine Sonderbehandlung braucht, schrieb ich ja bereits. In jedem Falle wäre für alle weiteren Fragen sinnvoll, Du postest einen Link mit dem aktuellen Stand. |
So, mal wieder ein kleines Update:
Als ich zum Test eine leere HTML Seite mit lediglich der Listenstruktur als Inhalt erstellt habe und die Styles nach deinen Angaben aktualisiert habe (floats raus, display: inline-block und vertical-align:top setzen), ging die Sitemap auf einmal im IE8 - aber nur lokal. Sobald ich das Gerüst auf den richtigen Server lade, werden im IE8 die Listen wieder alle untereinander angezeigt. Da führt er die Seite irgendwie im Kompatibilitätsmodus aus. Zum Test habe ich das Ganze mal auf meinen eigenen Server hochgeladen, da funktioniert es im IE8, wenn ich die Kompatibilitätsansicht aktiviere, allerdings auch nicht mehr: Sitemap In allen anderen Browsern funktioniert es wie gehabt. Woran kann das liegen? Was muss für den IE noch zusätzlich angeben, damit die Listen nicht untereinander, sondern nebeneinander angezeigt werden? |
Alle Zeitangaben in WEZ +2. Es ist jetzt 17:31 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023