IE7-Bug in Moodle-Layout
Mimhakkuh
- css
Hallo, ich habe ein Problem mit der Darstellung des Layouts einer Moodle-Seite im IE7 (Mozilla stellt alles fehlerfrei dar).
Nach erfolgloser Suche poste ich das Problem jetzt hier:
Es handelt sich um folgende Seite (Typo3 wird nicht verwendet, es handelt sich um Moodle).
Das Problem existiert nur auf der Startseite (alle weiteren Seiten werden korrekt dargestellt. Auf der Startseite passiert im IE7 folgendes:
Der DIV-Bereich "Content" hält die Seitenbreite von 995px korrekt ein. Die darunterliegende Tabelle "Layout-Table" fällt zu gross aus. Im IE Developer Tool erkenne ich, dass die Unterelemente der "Layout-Table" mit horizontal 2 Pixeln Abstand voneinander dargestellt werden (Linker rand --> Sidebar links, Sidebar Links --> Mittelspalte & Mittelspalte --> Sidebar rechts).
Damit verschiebt sich die Breite von "Layout-Table" über den Rand hinaus horizontal nach rechts.
Dies liegt weder an margin/padding Werten der Spalten, noch an margin-padding-Werten der Tabelle; ich habe alle auf 0 gesetzt. Auch potentielle border-width-Werte habe ich auf 0px gesetzt.
Ich bin absolut überfragt, woran diese Verschiebung liegen könnte. Ich hoffe, Ihr könnt mir weiterhelfen.
Der HTML-Code:
<div id="content" class=" clearfix">
<!-- Start: Layout-Table -->
<table id="layout-table" summary="layout">
<tbody>
<tr>
<td id="left-column" style="width: 210px;">
<!-- Inhalt: linke Sidebar -->
</td>
<td id="middle-column">
<!-- Inhalt: mittlere Spalte -->
</td>
<td id="right-column" style="width: 210px;">
<!-- Inhalt: rechte Spalte -->
</td>
</tr>
</tbody>
</table>
</div>
<div id="footer">
<!-- Inhalt: Footer -->
</div>
Nachtrag: Der Inhalt verschiebt sich nicht nur durch die Distanz zwischen den Spalten. Die Tabelle "Layout Table" bildet ausserdem oben, unten, links und rechts einen pixel Distanz; gleich einem 1px margin.
Das Problem ist gelöst - für id="layout-table" war ein border-collapse: collapse notwendig.