Salve a tutti, sto imparando in questo periodo i css, quindi magari la mia domanda sarà pure banale... ho questo codice html:

codice:
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
		<title>
			La Biblioteca Perduta
		</title>
		<meta name="description" content="Molte pergamene devono essere scoperte, e moltissime devono essere ancora scritte..."/>
		<meta name="keywords" content="biblioteca, perduta, storie, racconti"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<a href="/index.html">
					[img]logo.gif[/img]
				</a>
			</div>
			
			<div id="navigation" >
				Ingresso
				Sfoglia
				Cos'è la biblioteca?
				Invia uno scritto
			</div>
			
			<div id="content">
				
			</div>
			
			<div id="footer">
			
			</div>
			
		</div>
	</body>
	
</html>
a cui ho applicato questo css:

codice:
html, body { margin:0; padding:0; }
body { font-family: arial,sans-serif; font-size: 76%; text-align: center; position absolute;}
div#container { width: 620px; margin: 0 auto; margin-top: 20px; text-align: center;}
div#header { }
div#navigation { background: #FFFFCC; width: 520px; height 140px; margin-left: 50px;
									margin-top: -20px; padding-top: 20px; padding-bottom: 10px; }
perchè su firefox mi si vede come lo voglio io: così...


e su explorer viene così?


non ci capisco nulla... come posso fare in modo che si veda in entrambi i browser, nel modo che voglio io?
grazie mille in anticipo per la risposta!