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

Beitrag lesen

SELF-Forum

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

DrMaFu Homepage des Autors
– Informationen zu den Bewertungsregeln

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 .....)

Beitrag melden
–
Informationen zu den Bewertungsregeln