Ragazzi, sapreste spiegarmi perché questo layout viene visualizzato correttamente con le ultime versioni di opera e firefox mentre ie6 visualizza il tutto ingrandito e sfasato?

Questo lo stile:


/*stili generici*/
html,body{margin:2px; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%;}
h1{margin:0px;text-align:center;padding:0.2em;}
h2{margin:0;}
body{background-color:#CCCCFF}

/*stili per il contenitore*/
#container{width:60%; margin:auto;border-left:solid 1px; border-right:solid 1px;}

/*stili per l'header*/
#header{background-color:#FFFF99;border-top:solid 1px;border-bottom:solid 1px;}

/*stili per la navoigazione*/
#navigation{background-color:#99CCFF; font-size:1.1em;padding:0.5em;border-bottom:solid 1px;}
#navigation ul{margin:0;padding:0; list-style-type: none}
#navigation li{display: inline; margin: 0 0 0 2em;padding: 0;}
#navigation a:link{text-decoration:none;color:black;}
#navigation a:hover{background-color:#666666; color:yellow;}

/*stili per il contenuto*/

#content{padding:1em 1.5em; background-color:#FFFF99;border-bottom:solid 1px;}
#content p{line-height:1.8em; margin-top:0.5em; margin-bottom:0;}

/*stili per il footer*/
#footer{padding:0.3em; background-color:#99CCFF; text-align:center;border-bottom:solid 1px;}


e questo il codice di marcatura:

<html>

<head>
<title>Layout monolitico</title>
<link rel="stylesheet" type="text/css" href="layout_monolitico.css">
</head>

<body>
<div id="container">
<div id="header"> <h1>Scacchipong, scacchi e tennis-tavolo online!<h1>
</div>
<div id="navigation">
<ul>
[*]Chi sono
[*]Scacchi
[*]Tennis-tavolo
[*]contatti
[*]siti consigliati
[/list]
</div>
<div id="content"><h2>Layout monolitico</h2>



Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni (generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con macrosezioni (sottositi)</p>
</div>
<div id="footer">Sito realizzato da Bluekind, tutti i diritti riservati.
</div>
</div>
</body>

</html>

Ciao.