ho una situazione di questo tipo:

<html>
<head>
<title>prova</title>
<style type="text/css" title="mio" media="screen">
@import "mio.css";
</style>
</head>
<body id="body">
<div id="container">

<div id="header">


pippo</p>


pippo</p>


pippo</p>
</div>

<div id="content">


pippo</p>


pippo</p>


pippo</p>
</div>

<div id="footer">


pippo</p>


pippo</p>


pippo</p>
</div>

</div>
</body>
</html>

il css è questo:




html {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
font-family: Comic Sans MS, Arial;
font-size: 12px;
height: 100%;
width: 100%;
background-color: #cccccc;
}

#container {
width: 700px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
position: relative;
}

#header {
background-color: #009999;
width: 400px;
margin-top: 30px;
margin-left: 200px;
position: relative;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
}

#content {
background-color: #009999;
width: 400px;
margin-top: 0px;
margin-left: 200px;
position: relative;
border-right: 1px solid black;
border-left: 1px solid black;
}

#footer {
background-color: #009999;
background-repeat: repeat;
width: 400px;
margin-top: 0px;
margin-left: 200px;
position: relative;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

IE interpreta bene e mi attacca i div uno all'altro con continuità.
Mozilla invece lascia uno spazio tra un div e l'altro e raddoppia il margine sinistro.
Cosa posso fare avere lo stesso risultato che ho con IE.
Cosa ho sbagliato?
Grazie mille