IE9 Bug bei Unsorted List <UL><LI> in Verbindung mit float:left;

[DrMaFu]

Guten Morgen HTML-Gemeinde,

nach einem langen Wochenende habe ich erneut ein Problem mit dem IE9 entdeckt welches ich aktuell noch nicht gelöst habe und Eure Hilfe erbitte.

Und zwar....

Man bastle sich einen DIV Container mit einem Bild als Inhalt:

<div align ="center" class="PictureFloatLeft" >
        <img  border="0" src="../../../pics/himmelsaequator.gif"
              alt="Der Himmels&auml;quator"
              title="Der Himmels&auml;quator"
              name="Himmelsaequator"
              id="Himmelsaequator" /><br />
        Der Himmels&auml;quator
    </div>

wobei

.PictureFloatLeft
    {
        float:Left;
        margin-top:20px;
        margin-left:20px;
        margin-right:20px;
        margin-bottom:20px;
        color:#7399E7;
        font-family:Geneva, Arial, Helvetica, sans-serif;
        font-style:normal;
        font-weight:normal;
        font-size:14px;
    }

Anschließend versuche man rechts neben das Bild eine unsortierte Liste zu erzeugen welche den DIV Container (da float) umfließt.

Quasi so:

<div class="Txt14LeftTab">
        <ul style="list-style-type:square;">
            <li>Test Zeile 1</li>
            <li>Test Zeile 2</li>
            <li>Test Zeile 3</li>
            <li>Test Zeile 4</li>
            <li>Test Zeile 5</li>
            <li>Test Zeile 6</li>
            <li>Test Zeile 7</li>
            <li>Test Zeile 8</li>
        </ul>
    </div>

<div style="clear:both" />

Nun gibt es einen interessanten Effekt, uns zwar nur bei IE9.
Die SQUARES werden nicht wie erwartet rechts neben dem Bild in der Liste dargestellt sondern werden von der Liste abgehoben links an den Rand über das Bild gezeichnet ?!?!?!

Es sieht so aus, als wenn es speziell für die Squares den IE nicht interessiert, dass es eigentlich einen Float-Bereich gibt und er diese Grenzen ignoriert.

Ich bin wieder mal ratlos. Der IE8, Opera, FireFox, Chrome machen es richtig, nur der IE9 spinnt.

Wer es sich mal live ansehen möchte, hier der Link zum Frameset

http://www.kleinmaeusiges.de/html/content/astronomie/frame_sonnensystemcontent.html

Zu finden im Menüpunkt "Himmelsmechanik".

Also wie gesagt, FireFox & Co passt, nur der IE pappt die Squares von der Liste weg an den linken Rand?

Wisst Ihr einen Rat?

Grüße,
Markus

(PS: Ja ich weiss, Homepage gehört überarbeitet da sie noch Frames verwendet aber ich habe zu wenig Zeit .....)

[LX]

Hallo!

Ich habe verschiedene Varianten durchgespielt. Die einfachste wird darin bestehen, dem IE9 und den meisten anderen aktuellen Browsern statt dem normalen Square-Block mittels before-Attribut das entsprechende UTF-8-Zeichen voranzustellen, IE6-8 kann man im CSS ausfiltern, indem man nach dem Selektor einen doppelten ID-Selektor verwendet:

.whatever #selection, #not#ie6-8 { ... }

Gruß, LX

[Gunnar Bittersmann]

@@LX:

nuqneH

Ich habe verschiedene Varianten durchgespielt. Die einfachste wird darin bestehen, dem IE9 und den meisten anderen aktuellen Browsern statt dem normalen Square-Block mittels before-Attribut das entsprechende UTF-8-Zeichen voranzustellen

Nein.

Außerdem gibt es weder „before-Attribute“ noch „UTF-8-Zeichen“.

Qapla'

[Gunnar Bittersmann]

@@DrMaFu:

nuqneH

<ul style="list-style-type:square;">

Gib dem Ding noch 'overflow:hidden'. Und zwar nicht inline, sondern im Stylesheet! ('list-style-type' ebenso.)

<div style="clear:both" />

Das sollte dann auch überflüssig sein. Übrigens darfst du in HTML-kompatiblem XHTML nicht <div/> schreiben; der Tagsoup-Parser schließt das Element nicht. Die Kurzschreibweise darfst du nur bei leeren Elementen verwenden, die per DTD leer sein müssen oder bei denen das End-Tag in HTML optional ist.

Wer es sich mal live ansehen möchte, hier der Link zum Frameset
http://www.kleinmaeusiges.de/html/content/astronomie/frame_sonnensystemcontent.html

Das ist kein Link, sondern ein URI. Es kann doch nicht zu schwer sein, den „Link“-Button über dem Eingabefeld zu benutzen. Oder die in der Hilfe angegebene Syntax.

Zu finden im Menüpunkt "Himmelsmechanik".

Dann sag doch gleich http://www.kleinmaeusiges.de/index.html?html/menue/astronomie/frameset_sonnensystemcontent.html oder noch besser http://www.kleinmaeusiges.de/index.html?html/menue/astronomie/frameset_sonnensystemcontent.html bei deaktiviertem JavaScript.

(PS: Ja ich weiss, Homepage gehört überarbeitet da sie noch Frames verwendet aber ich habe zu wenig Zeit .....)

Und sinnlose Zeichenescapes im Quelltext verwendet sie auch anstatt richtiger Umlaute.

Qapla'

[DrMaFu]

Gib dem Ding noch 'overflow:hidden'. Und zwar nicht inline, sondern im Stylesheet! ('list-style-type' ebenso.)

Yes, I did it .... und .... geil! Es funktioniert.

Übrigens darfst du in HTML-kompatiblem XHTML nicht <div/> schreiben;

Oh ja, blöd von mir, der Fehler ist beim copy und past passiert als ich das schließende DIV-Tag </div> vergessen hatte und schnell händisch eingehacked hatte.

Das ist kein Link, sondern ein URI. Es kann doch nicht zu schwer sein, den „Link“-Button über dem Eingabefeld zu benutzen. Oder die in der Hilfe angegebene Syntax.

Jawoll :-)

Und sinnlose Zeichenescapes im Quelltext verwendet sie auch anstatt richtiger Umlaute.

Das ist historisch bedingt ..... ich wollte aus Nummer-Sicher gehen.

Bei aller Moserei trotzdem herzlichen Dank für die Hilfe!