CSS: height: 100% abhängig von DocType?

Status
Nicht offen für weitere Antworten.
S

stonedjehova

Mitglied
Hallo,

ich habe ein Problem mit einer Seite, wenn ich im Bsp unten den Doctype weglasse, dann wird die Tabelle 100% dargestellt, mit Doctype nicht, aber warum?
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Initiativbewerbung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;">
	<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse;">
		<tr>
			<td style="width: 20px; height: 50px;"></td>
			<td style="width: 100px; height: 50px; background-color: #123456;"></td>
			<td style="height: 50px; font-size: 30px; font-family: 'times new roman', roman; letter-spacing: 5px; color: #123456; padding-left: 20px;">
			Name
			</td>
		</tr>
		<tr>
			<td style="width: 20px; height: 50px;background-color: #123456;"></td>
			<td style="width: 100px; height: 50px;background-color: #123456;"></td>
			<td style="height: 50px; background-color: #123456; padding-left: 10px; padding-right: 50px; font-size: 30px; vertical-align: middle; text-align: right; color: #FFFFFF;">
			Referenzen
			</td>
		</tr>
		<tr>
			<td style="width: 20px;"></td>
			<td style="width: 100px; background-color: #123456;">
				<p style="margin-right: 5px; margin-top: 40px; text-align: right;"><a class="hell" href="index.html" onfocus="blur()">Startseite</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell" href="anschreiben.html" onfocus="blur()" >Anschreiben</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="lebenslauf.html" onfocus="blur()" >Lebenslauf</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="referenzen.html" onfocus="blur()" >Referenzen</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="download_d.html" onfocus="blur()" >Download</a></p>
				<p style="margin-right: 5px; margin-top: 10px; text-align: right;"><a class="hell"  href="kontakt.html" onfocus="blur()" >Kontakt</a></p>
			</td>
			<td style="color: #123456; font-size: 14px; vertical-align: top;">
				<p style="margin-left: 10%; margin-right: 10%; margin-top: 30px;">
				Hier haben Sie die M&ouml;glichkeit in bisherige Zeugnisse Einsicht zu nehmen.</p>
				<p style="margin-left: 10%; margin-right: 10%">
				Die Hyperlinks führen jeweils zu einem PDF-Dokument, am Ende sind alle Unterlagen komplett in einem PDF zusammengefasst.</p>
				<table border="0" style="height: 100%; margin-left: 10%; margin-right: 10%; margin-top: 20px; border-style: none; border-spacing: 0px; border-collapse: collapse;">
					<colgroup>
						<col width="200">
						<col>
					</colgroup>
					<tr>
						<td style="font-weight: bold; border-bottom: solid 2px #123456; padding-left: 5px; padding-right: 5px;">Dokument</td>
						<td style="font-weight: bold; border-bottom: solid 2px #123456; padding-left: 5px; padding-right: 5px;">Download / Gr&ouml;&szlig;e</td>
					</tr>
					<tr>
						<td style="padding-top: 10px;">Bachelor Abschlusszeugnis</td>
						<td style="padding-left: 25px;">PDF</td>
					</tr>
					<tr>
						<td style="padding-top: 10px;">Praktikanten-Zeugnis</td>
						<td style="padding-left: 25px;">PDF</td>
					</tr>
					
				</table>
			</td>
		</tr>
	</table>
</div>
</body>
</html>
 
Das wird dann wohl nur eine Fehlinterpretation des Internet Explorers sein, denn in meinem Firefox sieht beides – bis auf den Unterschied, dass CSS nur mit Dokumententyp Deklaration korrekt interpretiert wird – gleich aus.
 
ja, eben, im firefox macht das keinen unterschied...... aber halt im IE. hab keine ahnung was ich machen soll, aber die deklaration weglassen, ist ja auch nicht so das wahre
 
Nein, das ist auch da, ausserdem würde es auch ohne das funktionieren, da die css Eigenschaften direkt im Dokument in der Initialisierung der Tabellen angegeben sind.
Wie gesagt ohne die Doctypes funktioniert es wunderbar, im IE und Firefox
 
Du kannst einfach im Stylesheet den body und html mit 100% Höhe versehen, also so:
Code: 
body, html {
  height: 100%;
}
Dann wird deine Höhe auch mit Doctype entsprechend interpretiert.
 
Hi All!

Diese dooofe DocTypes... Ohne gehts perfekt, mit (immerhin) nur im Firefox:

http://www.saentis-investment.ch/new/index.php
und
http://www.saentis-investment.ch/new/styles.css

Sobald ich einen DocType angebe (XHTML 1. oder HTML 4.01) zerreists das Layout im IE. Genauer: Die Layouttabelle ignoriert auf einmal alle height-Angaben im CSS für die einzelnen TDs und stellt alle auf automatisch.

Komme echt nicht mehr weiter.. Sonst lass ichs halt ohne DocType, was ich aber vermeiden möchte.

Thanks und Grüsse! Chris
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück