✔ Zuviele neue Zeilen bei float im Internet Explorer

[The Garfieldius]

Hallo

Ich erstelle gerade eine Seite, wo eine Übersichtsseite mit Fotos der Künstler befüllt wird. Das ganze ist in Typo3 und weil die Kunden keine Ahnung haben vom Internet haben, ist jede Person ein eigenes Element als Bild mit Text darunter. Die einzelnen Elemente werden mit einem <div class="kuenstler"> ... </div> umschlossen. Der Selektor .kuenstler sieht folgendermaßen aus:

.kuenstler {
    width:90px;
    height:150px;
    float:left;
    margin:0px 30px 30px 0px !important;
    margin:0px 15px 15px 0px;
}

Die Porträts werden nun schön aneinander gereiht. Funktioniert in allen Browsern, auch im Internet Explorer, nur beginnt er ab der dritten Zeile zu spinnen. Woran kann das liegen?

Anbei ein Screenshot, der zeigt wie es aussehen sollte, und bei anderen Browsern auch tut. Der zweite zeigt die Ausgabe von Internet Explorer.

 

[Maik]

Vielleicht solltest Du mal den vollständigen Quellcode (HTML + CSS) posten, oder einen Link zur Seite nennen, denn anhand des gezeigten Codeschnipsels lässt sich das Fehlverhalten im IE nicht so recht nachvollziehen.

 

[The Garfieldius]

Klar, logisch

CSS Code, siehe oben, das erzeugte HTML sieht so aus:

<!--  CONTENT ELEMENT, uid:281/textpic [begin] -->
<span class="kuenstler">
<!--  Image block: [begin] -->
<div class="csc-textpic csc-textpic-left csc-textpic-above">
    <div class="csc-textpic-imagewrap">
        <dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:90px;">
            <dt><a href="index.php?id=69" target="_top"><img src="typo3temp/pics/49c43b4876.jpg" width="90" height="115" border="0" alt="" /></a></dt>
            <dd class="csc-textpic-caption"></dd>
        </dl>
    </div>
    <div class="csc-textpic-text">
        <!--  Text: [begin] -->
        <p><a href="index.php?id=69" title="Öffnet einen internen Link im aktuellen Fenster" target="_top" class="internal-link">Alexandru<br />
            Badea</a></p>
        <!--  Text: [end] -->
    </div>
</div>
<div class="csc-textpic-clear">
    <!-- -->
</div>
<!--  Image block: [end] -->
</span>
<!--  CONTENT ELEMENT, uid:281/textpic [end] -->

Der Link zur Seite ist http://www.leharfestival.at/neu/index.php?id=120

 

[Maik]

Also an dem gezeigten CSS-Code kann es nicht liegen, denn wenn ich ihn und 60 Künstler in eine Testseite einsetze, werden sie im IE fehlerfrei angeordnet, wie der Screenshot zeigt.

Und nur mal so am Rande angemerkt: in einem Inline-Element (= span) dürfen keine Block-Elemente enthalten sein.

 

[hela]

Vielleicht liegt es am HTML-Quelltext:

<span class="kuenstler">
  <!--  Image block: [begin] -->
   <div class="csc-textpic csc-textpic-left csc-textpic-above">
...
  </div>
   <div class="csc-textpic-clear">
     <!-- -->
   </div>
   <!--  Image block: [end] -->
</span>

Eine Element-Referenz für das SPAN-Element gibt es hier.

 

[The Garfieldius]

Dass das span hier nicht gültig ist, ist mir schon klar, macht aber insofern keinen Unterschied, als dass z.B.: bei einem div, das Ergebnis exakt das gleiche ist.

Kann es sein, dass das mit der Tabelle rundherum zu tun hat? Klingt zwar komisch, aber, wie michaelsinterface bereits gezeigt hat, funktioniert das CSS ohne Tabelle.

 

[Maik]

Nimm doch mal testweise die Höhenangabe für die Tabellenzelle raus, in der die Künstler eingesetzt sind, denn die angegebenen 463 Pixel werden dicke überschritten, und in diesem (Höhen-)Bereich beginnt auch die dritte Zeile.

 

[hela]

Kann es sein, dass das mit der Tabelle rundherum zu tun hat?

Dann würde ich es an deiner Stelle mal ganz ohne Tabelle ausprobieren. Mir ist unklar, wozu die Tabelle gebraucht wird.

 

[The Garfieldius]

LÖSUNG GEFUNDEN!

Bei den Namen, die zu kurz sind, um in eine neue Zeile umzubrechen, sind die divs um ca zehn Pixel,kleiner als bei den übrigen. Das bringt offensichtlich den Internet Explorer aus dem Konzept. Wenn aber alle gleich groß sind - bei den kürzeren Namen muss dann halt ein <br> herhalten - funktioniert es, weil dann alle Blocks gleich groß sind.

Und ein herzliches danke an alle für die Hilfe.

 

[Maik]

Der (Fehler-)Teufel steckt bekanntlich im Detail