margin bei div im Firefox und IE

[joexx]

Hallo,

ich habe ein Problem bei der Darstellung meiner div's.

<div id="header">
</div>

</div>
<div id="box1">

</div>
<div id="box2">
</div>

Der CSS Code sieht folgendermaßen aus:
body {
margin: auto;
width: 1024px;
font-size: 13px;
font-family: "trebuchet ms", helvetica, sans-serif;
background-image: url('backg.jpg');
background-repeat:no-repeat;
background-color:#fff;
background-attachment:fixed;
padding:0px;
}
#header {
height: 104px;
padding: 10px;
background-color:#fff;
background: url('header.gif') repeat-x;
text-align: center;
}
#box1 {
text-align: left;
position: absolute;
height: 600px;
margin: 10px 00px 0px 0px;
background-color: #c5c5c5;
width: 200px;
opacity: .6;
filter: alpha(opacity=60);
}

#box2 {
margin: 10px 0px 0px 200px;
background-color: #c5c5c5;
width: 824px;
height: 600px;
overflow:auto;
}

Wenn es im Firefox betrachtet wird stimmt alles, aber sobald ich die Seite im Internet Explorer anschaue verschiebt sich die #box1 nach rechts mitten über/unter die #box2.
Weiß jemand dazu die Lösung? Komme da einfach nicht weiter.
Vielen Dank

mfg