26.08.2010, 13:37
|
|||
|
|||
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:  Hier ein Screen im IE:  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 --> <ul class="lv1"> <li><a href="#">Test</a> <!-- LEVEL 2 --> <ul class="lv2"> <li><a href="#">Test 1</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 2</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 3</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 4</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <div class="clear"></div> <li><a href="#">Test 5</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 6</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 7</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <li><a href="#">Test 8</a> <!-- LEVEL 3 --> <ul class="lv3"> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> <li><a href="#">Test</a></li> </ul> <!-- // LEVEL 3 --> </li> <div class="clear"></div> <li><a href="#">Test 9</a></li> </ul> <!-- // LEVEL 2 --> </li> </ul> <!-- // LEVEL 1 --> Code:
#sitemap ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#sitemap ul li {
display: inline-block;
margin: 0px 0px 15px 0px;
padding: 0px;
list-style: none;
font-family: Arial,sans-serif;
font-size: 78.56%;
font-weight: bold;
}
#sitemap ul li a {
float: left;
color: #887F6F;
}
#sitemap ul li ul {
float: left;
margin-left: 155px;
margin-top: -15px;
width: 720px;
}
#sitemap ul li ul li {
float: left;
margin: 0px 0px 15px 0px;
padding: 0px 0px 0px 20px;
background-image: url('../img/sitemap-arrow.gif');
background-repeat: no-repeat;
background-position: 0px 3px;
font-size: 100%;
font-weight: bold;
width: 155px;
}
#sitemap ul li ul li ul {
clear: both;
width: 155px;
margin-left: 0px;
margin-top: 0px;
}
#sitemap ul li ul li ul li {
margin: 0px;
padding: 0px 0px 0px 0px;
background-image: none;
font-size: 100%;
font-weight: normal;
}
#sitemap ul li ul li ul li a {
color: #CDC8BE;
}
|
| Sponsored Links |
|
26.08.2010, 13:47
|
||||
|
||||
|
Deine clearer-Konstruktion ist nicht valide, das solltest Du als erstes beheben.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
26.08.2010, 14:00
|
|||
|
|||
|
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.
|
|
26.08.2010, 14:08
|
||||
|
||||
|
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
26.08.2010, 14:25
|
|||
|
|||
|
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?
|
|
26.08.2010, 14:31
|
||||
|
||||
|
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
26.08.2010, 14:37
|
||||
|
||||
|
Ja, das gibt es. IE < 8 und FX < 3 kennen es zwar nicht, aber man kann es ihnen relativ leicht beibringen.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
|
26.08.2010, 15:33
|
|||
|
|||
|
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.
|
|
26.08.2010, 15:41
|
||||
|
||||
|
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.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
|
| Sponsored Links |
|
27.08.2010, 11:23
|
|||
|
|||
|
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?
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| IE6: 3px Bug in Paragraph | 0xBAADFEED | (X)HTML | 3 | 04.02.2011 15:47 |
| Anfängerfrage zum Thema clearen im ie6 | blond | CSS | 0 | 13.04.2010 05:47 |
| Welcher IE6 Bug ist das? UL-Float bei LI mit "height" | martinpet | CSS | 5 | 20.08.2009 09:21 |
| Kennt jemand diesen IE6 Bug? | philipp | CSS | 2 | 05.01.2008 18:47 |
| IE6 und FF Darstellungsproblem! Bug? | Speedy19102000 | CSS | 27 | 14.12.2007 15:28 |
Linear-Darstellung
