zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS-formatierte Tabelle / height 100% / auto+fixed Zeilenhöhen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.11.2007, 12:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
wysiwyg befindet sich auf einem aufstrebenden Ast
Böse 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.
__________________
What you see is what you get!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.11.2007, 13:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
wysiwyg befindet sich auf einem aufstrebenden Ast
Standard

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*
__________________
What you see is what you get!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.11.2007, 15:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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

Robin
__________________
CSS-Rauch! Nicht einatmen!
Mit Zitat antworten
  #4 (permalink)  
Alt 13.11.2007, 15:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
wysiwyg befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von RoToRa Beitrag anzeigen
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
__________________
What you see is what you get!
Mit Zitat antworten
  #5 (permalink)  
Alt 13.11.2007, 15:54
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von wysiwyg Beitrag anzeigen
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).

Geändert von heiko_rs (13.11.2007 um 15:59 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 13.11.2007, 17:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.12.2005
Beiträge: 4
wysiwyg befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine Ideen, heiko.

Ich werde sie beherzigen und mal gucken wie weit ich damit komme!
__________________
What you see is what you get!
Mit Zitat antworten
  #7 (permalink)  
Alt 13.11.2007, 20:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
div-höhe? - Hauptcontainer über ganze Seite will nicht... AndMei CSS 5 13.12.2010 15:43
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
Float-Problem? mischaef CSS 33 20.10.2010 17:20
IE7 stellt Seite nicht richtig da (versetzter Text fehlendes Logo) Chagh CSS 2 26.04.2009 13:40
CSS - Background-image im Firefox djsky CSS 7 04.02.2009 22:36


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:01 Uhr.