Marcel Stör: Doppelt zentriert und doch daneben

Folgenden code verwende ich, um eine "box" doppelt zentriert darzustellen:

  
<?xml version="1.0" encoding="UTF-8"?>  
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>Test</title>  
<style type="text/css">  
   html {  
    display: table;  
    width: 100%;  
    height: 100%;  
   }  
   body {  
    display: table-cell;  
    width: 100%;  
    height: 100%;  
    padding: 20px;  
    vertical-align: middle;  
   }  
   div {  
    width: 100%;  
    height: 100%;  
    border: 2px solid #CC0066;  
   }  
  </style>  
</head>  
<body>  
<div> Lorem ipsum dolor sit amet </div>  
</body>  
</html>  

Wichtig ist hier die erste Zeile mit der XML-Deklaration womit die IEs in den quirks mode geschickt werden damit die 100% Höhenangabe funktioniert (in SELFHTML gibt es einen netten Beitrag dazu).
Dank http://browsershots.org/ habe ich bemerkt, dass der IE7 ganz böse Dinge mit diesem CSS anstellt: http://browsershots.org/screenshots/fe453f59e215d056950e01c38024feed/ (link vermutlich nicht bis in alle Ewigkeit verfügbar). Wie lässt sich dies verhindern?
Verwende ich anstelle eines DIVs ein IFRAME, verhält sich auch Safari seltsam. Unterhalb der Seite bleibt ein ca. 40px breiter Streifen bis zum unteren Ende des view ports einfach leer d.h. weiss. Hat jemand eine Idee woran _das_ liegen könnte?

--
Marcel Stör
Skype: marcelstoer
  1. Folgender code funktioniert wunderbar mit einem DIV auf allen browsern:

      
    <?xml version="1.0" encoding="ISO-8859-1"?>  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <title>Header und Foter fest</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <style type="text/css">  
    html, body {  
     height:100%;  
     margin:0;  
     padding:0;  
     background-color: silver;  
     overflow: hidden;  
    }  
    * html body {  
      padding:20px;  
    }  
    #box {  
     position:absolute;  
     top:20px;  
     right:20px;  
     bottom:20px;  
     left:20px;  
     border: 2px solid #CC0066;  
    }  
    * html #box {  
     position:static;  
     height:100%;  
     width: 100%;  
    }  
    </style>  
    </head>  
    <body>  
    <iframe id="box" src="http://www.sbb.ch/"></iframe>  
    </body>  
    </html>  
    
    

    Mit einem IFRAME macht er jedoch ziemlich Ärger wie man bei der Testreihe bei browsershots sehen kann.
    Lösungsansätze nehme ich gerne entgegen.

    --
    Marcel Stör
    Skype: marcelstoer