XHTMLforum

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)

wysiwyg 13.11.2007 12:40

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.

wysiwyg 13.11.2007 13:28

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*

RoToRa 13.11.2007 15:13

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

Robin

wysiwyg 13.11.2007 15:32

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

heiko_rs 13.11.2007 15:54

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

wysiwyg 13.11.2007 17:30

Vielen Dank für deine Ideen, heiko.

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

heiko_rs 13.11.2007 20:46

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:25 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020