Ciao ragazzi sto creando il layout di una pagina ma con lo stesso codice ho risultati diversi in IE e opera mentre firefox e chrome mi danno quello che voglio.

codice:
/*general.css*/ 
body{ 
background-color: #000000; 
/*background-image: url("../images/collage.jpg");*/ 
font-size:12px; 
font-family:Arial, Helvetica, sans-serif; 
font-color: #ffffff; } 

/*contenitore di tutto il sito*/ 

.main{ 
margin: auto; 
width:900px; 
height:auto; 
border:solid green; } 

.headermenu{ 
width: 890; 
margin: auto; 
height: 30px; 
border: solid red; }
questo l'html:


codice:
<body> 
<div class="main"> 
<div class="headermenu"</div>
.
.
.contenuto
.
.
</div>
</body>>
ovviamente con il collegamento al file css...

Praticamente su ff e chrome ho il div main che mi contiene il div headermenu su tutta la pagina ammettendo che inserisca dei contenuti in altri div prima di chiudere il div main.

Mentre su IE e opera questi 2 riquadri mi si mettono sopra a tutta la pagina nel top e sotto ci sono tutti i contenuti, fuori dai due riquadri...

Cosa devo modificare?