XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE(6-8)-Bug beim clearen von Listen (http://xhtmlforum.de/showthread.php?t=62181)

pHamez 26.08.2010 14: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:
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 -->
                <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 -->

Und hier das dazugehörige CSS:
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;
}

Diverse Hacks und Fixe wie "zoom:1" etc. brachten auch kein Erfolg. Ich hoffe, dass jemand von euch einen Tipp hat. Danke schonmal!

heiko_rs 26.08.2010 14:47

Deine clearer-Konstruktion ist nicht valide, das solltest Du als erstes beheben.

pHamez 26.08.2010 15: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.

heiko_rs 26.08.2010 15:08

Zitat:

Zitat von pHamez (Beitrag 472880)
Meinst du, dass ich <div> zwischen Listen packe? Oder was genau ist nicht valide?

Das sagt Dir der Validator: The W3C Markup Validation Service

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.

pHamez 26.08.2010 15: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?

heiko_rs 26.08.2010 15: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.

heiko_rs 26.08.2010 15:37

Ja, das gibt es. IE < 8 und FX < 3 kennen es zwar nicht, aber man kann es ihnen relativ leicht beibringen.

pHamez 26.08.2010 16: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.

heiko_rs 26.08.2010 16: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.

pHamez 27.08.2010 12: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?


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