Zitat von
Meflin:
das würde aber doch die kompatibilität des css attributs height=100% nicht ändern?!
oder wie würdest du das machen?
Das height - attribut bezieht sich relativ auf den BODY - Tag. Der Body-Tag hört aber (im regelfall) bereits direkt nach dem letzten inline-Element auf. Will heissen: korrekt interpretiert fängt der sichtbare Inhalt Deiner Seite mit dem oberen Rand der Tabelle an und hört mit dem unteren Rand der Tabelle auf.
Diese Höhe der Tabelle sind 100%.
Der IE interpretiert dies (leider) anders, so daß für ihn die 100% auf das sichtbare Fenster bezogen sind.
Code:
<!DOCTYPE
html PUBLIC "-//
W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml11/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Zentrieren</title>
<style type="text/css">
/*<![CDATA[*/
#inhalt {
height:100px;
width:300px;
margin-top: -50px;
margin-left: -150px;
top:50%;
left:50%;
position: absolute;
background-color: #dedede;
border: 1px dotted black;
}
#inner {
width: 270px;
position: absolute;
margin: 15px;
background-color: #dede00;
}
/*]]>*/
</style>
</head>
<body>
<div id="inhalt">
<div id="inner">Dieser Bereich ist horizontal und vertikal zentriert.
Der Text darin bleibt linksbündig.
</div>
</div>
</body>
</
html>
Das ganze funktioniert so lange, wie der Inhalt-Bereich (da wäre Deine Tabelle drin) eine feste Breite und Höhe hat.
Er wird dann absolut mit der linken oberen Ecke in die exakte Mitte positioniert und danach um jeweils 50% seiner breite und höhe wieder nach oben und links verschoben. Damit erscheint er zentiert. Padding darf bei der äusseren Box nicht verwendet werden, sonst verschiebt sich alles wieder.