XHTMLforum - CSS-formatierte Tabelle / height 100% / auto+fixed Zeilenhöhen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS-formatierte Tabelle / height 100% / auto+fixed Zeilenhöhen (http://xhtmlforum.de/showthread.php?t=48864)

CSS-formatierte Tabelle / height 100% / auto+fixed Zeilenhöhen

Hallo,

ich versuche mich nun schon 2 Tage lang an einem scheinbar IE-spezifischen Problem bei dem ich einfach nicht weiterkomme und deshalb möchte ich euch um Mithilfe bitten. Folgendes Problem:

Ich möchte in einer 3-zeiligen, mittels CSS-formatierten Tabelle, die über die komplette Höhe der Seite gehen soll, der oberen und unteren Zeile eine feste Größe geben und die mittlere Spalte soll den Rest auffüllen – 2 sind also fix, die mittlere soll auto sein. Ich habe folgenden Code geschrieben der in Camino, Safari, FireFox, OmniWeb auf dem Mac und FireFox, Opera auf dem PC funktionieren, nur der IE/Win sperrt sich:

layout.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">



<html lang="de">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

        <title>untitled</title>

        <link rel="stylesheet" href="css/layout.css" type="text/css">

</head>

<body>

        <table border="0" cellspacing="0" cellpadding="0">

                <tr>

                        <td class="row1">Data1</td>

                </tr>

                <tr>

                        <td class="row2">Data2</td>

                </tr>

                <tr>

                        <td class="row3">Data2</td>

                   </tr>

        </table>

</body>

</html>

css/layout.css

Code:

html, body

{

        margin: 0;

        padding: 0;

        text-align: center;

        height: 100%;

}



table

{

        margin: 0px auto;

        height: 100%;

        width: 500px;

}



.row1

{

        height: 50px;

        background-color: gray;

}



.row2

{

        height: auto;

        background-color: blue;

}



.row3

{

        height: 50px;

        background-color: silver;

}

Kann jemand erkennen, was ich falsch mache?
Ich bin über jegliche Hinweise in die richtige Richtung dankbar!

Viele Grüße,

W.

Nach erneutem googlen bin ich auf folgende Problem-Beschreibung gestoßen, die das Problem anscheinend thematisiert nur in meinem Fall keinen Lösungsansatz bietet:

100% Table Height

Das ist doch zum Speien! *grummel*

Am besten auf die Tabelle verzichen. Reine CSS (tabellenlose) 100%-Höhe-Layouts gibt es überall zu finden, z.B. in unserer FAQ.

Robin

Zitat:

Zitat von RoToRa (Beitrag 357596)

Am besten auf die Tabelle verzichen. Reine CSS (tabellenlose) 100%-Höhe-Layouts gibt es überall zu finden, z.B. in unserer FAQ.

Vielen Dank für deine Antwort RoToRa! Ich möchte hier jetzt keine Table vs. CSS-Layout Diskussion anzetteln bzw. führen. Ich bin nunmal auf dieses Problem gestoßen und hoffe, dass jemand eine Lösung dazu kennt. Wenn es sich hierbei um tabulare Daten handelt, wieso sollte ich dann keine Tabellen dafür verwenden? Dazu sind sie ja schließlich geschaffen worden, nicht wahr?

/me

Zitat:

Zitat von wysiwyg (Beitrag 357602)

Wenn es sich hierbei um tabulare Daten handelt, wieso sollte ich dann keine Tabellen dafür verwenden? Dazu sind sie ja schließlich geschaffen worden, nicht wahr?

Klar, aber Dein Markup sieht beim besten Willen nicht nach tabellarischen Daten aus, sondern nach dem typischen Layout mit festem Header, festem Footer und variablen Content... Und dafür brauchst Du wirklich keine Tabellen - eine div-Alternative: stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout. Weitere Alternativen in der dazugehörigen Übersicht: Stu Nicholls | CSSplay | CSS Layouts Listing

Aber wenn Du partout Deine Tabellen benutzen willst: Im Quirksmode gehorcht der IE Deinem CSS ;)

EDIT: Die beste Alternative wäre FAQ Punkt 7 (da die genannten Frame-Simulationen auch nicht das Wahre sind).

Vielen Dank für deine Ideen, heiko.

Ich werde sie beherzigen und mal gucken wie weit ich damit komme!

Das exakte div-Äquivalent zu Deiner bisherigen Variante ist FAQ Punkt 7, und das läuft auch in allen Browsern einwandfrei (auch in älteren inkl. IE 5.0). Und je nach Design kann auch noch Punkt 1 interessant werden.