Tweet
Guten Morgen,
erstmal sorry, dass ich mit einem solch trivialen Problem komme, jedoch liefen alle meine Suchbegriffe ins Leere.
Folgendes: Ich habe eine Layout-Tabelle mit 3 Zeilen und 3 Spalten. Die obere und untere Zeile hat eine definierte Höhe (40px) - die linke und rechte Spalte eine definierte breite (30px). Die mittlere Spalte dient als "Contentbereich" und ist zusammengefasst.
Das Problem bereitet der IE bei der Verteilung der Höhen der Zeilen. Der FF "füllt" die mittlere Zeile (die keine festgelegte Höhe hat) so auf, wie es geplant war. Der IE jedoch passt ausgerechnet die obere und untere Zeile so an, dass es passt, was jedoch den Hintergrund der mittleren Zeile, der sich mit zunehmenden Inhalt ausdehnen soll, falsch erscheinen lässt.
Hier Bilder zur Verdeutlichung:
FF:
IE:
Die Ausdehnung der oberen und unteren Zeile habe ich zur Veranschaulichung umrahmt. Hier das relevante Listing:
Irgendwelche Ideen? Danke im Voraus!
erstmal sorry, dass ich mit einem solch trivialen Problem komme, jedoch liefen alle meine Suchbegriffe ins Leere.
Folgendes: Ich habe eine Layout-Tabelle mit 3 Zeilen und 3 Spalten. Die obere und untere Zeile hat eine definierte Höhe (40px) - die linke und rechte Spalte eine definierte breite (30px). Die mittlere Spalte dient als "Contentbereich" und ist zusammengefasst.
Das Problem bereitet der IE bei der Verteilung der Höhen der Zeilen. Der FF "füllt" die mittlere Zeile (die keine festgelegte Höhe hat) so auf, wie es geplant war. Der IE jedoch passt ausgerechnet die obere und untere Zeile so an, dass es passt, was jedoch den Hintergrund der mittleren Zeile, der sich mit zunehmenden Inhalt ausdehnen soll, falsch erscheinen lässt.
Hier Bilder zur Verdeutlichung:
FF:
IE:
Die Ausdehnung der oberen und unteren Zeile habe ich zur Veranschaulichung umrahmt. Hier das relevante Listing:
PHP-Code:
/* Contenttable */
table#contenttable {
width: 760px;
border-collapse: collapse;
margin: 20px auto 20px auto;
}
table#contenttable td.top {
background-image: url(img/bg_top.gif);
background-repeat: repeat-x;
background-position: top;
height: 40px;
width: 30px;
border: 1px solid #c00;
}
table#contenttable td.bottom {
background-image: url(img/bg_bottom.gif);
background-repeat: repeat-x;
background-position: bottom;
height: 40px;
width: 30px;
border: 1px solid #c00;
}
table#contenttable td.middle {
background-image: url(img/bg_middle.gif);
}
table#contenttable td#content {
background-color: #fff;
border: 1px solid #000;
}
PHP-Code:
<!--Contenttable begin-->
<table id="contenttable">
<tr>
<td class="top"></td>
<td id="content" rowspan="3">
<!--Content begin-->
<p>Lorem Ipsum blabla..</p>
<!--Content end-->
</td>
<td class="top"></td>
</tr>
<tr>
<td class="middle"></td>
<td class="middle"></td>
</tr>
<tr>
<td class="bottom"></td>
<td class="bottom"></td>
</tr>
</table>
<!--Contenttable end-->
Kommentar