Scusate il titolo... ma davvero sto impazzendo per una cavolata!!

Questa la pagina ridotta all'essenziale: LINK

Devo rendere un semplice margin tra 2 DIV annidati.
Firefox non rende quel margine

Internet Explorer sì invece... qui sotto l'immagine di come voglio che stiano le cose, così come insomma la vede Explorer:



Help please

...qui sotto il codice:

codice:
<style type="text/css">
<!--
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
	background-color: #ffc;
	margin: 0;
	padding: 30px;
}
#container {
	background-color: #f99;
	height: 400px;
	width: 550px;
	margin: 0 auto;
}
#mybox {
	background-color: #69c;
	height: 200px;
	width: 350px;
	margin: 20px auto;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="mybox">Lorem ipsum...</div>
</div>