Tabelle in der Mitte und vertikal ausgedehnt...

Ishildur

Hallo zusammen
Ich habe folgende Situation: Ich brauche eine Tabelle mit einer festen Breite, welche vertikal voll ausgedehnt ist. Die Tabelle soll sich in der Mitte des Browserfensters ausrichten:

Hier der Code, laut W3C:

<?php  echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Resarch</title>
 <style stype="text/css">
  body{
   margin:0px;
   padding:0px;
  }

  table#tbl_lay{
   background-color:blue;
   width:300px;
   height:100%;
   margin:0 auto 0 auto;
  }
 </style>
</head>
</style>
<body>
 <table id="tbl_lay">
  <tr><td>sdf</td></tr>
 </table>
</body>
</html>

Doch was sehen meine verwirrten Augen:
Unter Firefox, Safarie sowie Opera hat das "height:100%" überhaupt keinen Effekt, die Tabelle wird vertikal nicht ausgedehnt. Laut Selfhtml unterstützen diese Browser jene Eigenschaft jedoch!

Der Internet Explorer ignoriert das "margin:0 auto 0 auto" Die Tabelle ist links ausgerichtet statt in der Mitte!
Glücklicherweise kann ich dies mit einem Hack ("body style="text-align:center") wieder ausbügeln, doch das Problem der vertikalen Ausdehnung bleibt: Das gibts doch gar nicht:

width:100% funktioniert einwandfrei
height:100% funktioniert nur beim Internet Explorer

Was soll denn das?

Gruss Ishildur

Herrmann

Hi Ishildur,

probier mal zusätzlich ein:

html,body
{
  padding:0px;
  margin:0px;
  height:100%;
}

Neku

Für den Internet Explorer 6 gilt:

Du darfst kein '<?xml version="1.0" encoding="UTF-8" ?>' verwenden.
Du musst 'body { height: 100%; }' setzen.
Du darfst kein 'html { height: 100%; }' verwenden.

Für den Internet Explorer 7 gilt:

Du musst 'body { height: 100%; }' setzen.
Du darfst kein 'html { height: 100%; }' verwenden.

Für den Firefox gilt:

Du musst 'body { height: 100%; }' setzen.
Du musst 'html { height: 100%; }' setzen.

Verwendest du 100% Höhe auf 'html', dann wirst du im IE6/IE7 vertikal scrollen müssen, weil die HTML-Seite zu hoch wird. Verwendest du es nicht, funktioniert das Ganze nicht im Firefox.
Im IE6 darf vor dem <!DOCTYPE ...> kein weiterer Text mehr stehen, sonst wird vom IE6 ein älterer Darstellungsmodus verwendet, wodurch 'margin: auto;' nicht mehr funktioniert. D.h., du darfst kein '<?xml version="1.0" encoding="UTF-8" ?>' verwenden, wenn die Seite auch im IE6 korrekt dargestellt werden soll.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Resarch</title>
 <style type="text/css">
  html {
	height: 100%;
  }

  body {
    height:  100%;
    margin:  0px;
    padding: 0px;
  }

  table#tbl_lay {
    background: blue;
    height:     100%;
    margin:     0 auto 0 auto;
    width:      300px;
  }
 </style>
 <!--[if IE]>
  <style type="text/css">
    html {
	  height: auto;
    }
  </style>
 <![endif]-->
</head>
</style>
<body>
 <table id="tbl_lay">
  <tr><td>sdf</td></tr>
 </table>
</body>
</html>