css - IE7 - マージン: 兄弟要素に影響を与える自動

Question

私にはわからない奇妙なIE7のバグ...

HTMLは次のとおりです。

<header>
    <div class='header-overlay'>
        <div class='header-overlay-content'>
                 <ul>
                     <li>Contact Us</li>  
                     <li>FAQs</li>          
                 </ul>
            </div>
    </div>
    <div class="nav"></div>
</header>

該当する CSS は次のとおりです。

header {
    background: url('img/header-background.jpg') center no-repeat; 
    height: 325px;
    width:100%;
}

.header-overlay {
    height: 70px;
    width: 100%;
    position: absolute;
    background-color: #fff;
}

.header-overlay-content {
    height: 100%;
    width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px solid red;
}

.nav {
    background: url('img/main-nav-blank.png') no-repeat;
    width: 1000px;
    height: 57px;
    position: relative;
    top: 235px;

    margin: 0 auto;   /* this causes problems! */   
 }

基本的に、header-overlay は上部でページ幅全体を占め (したがって、幅: 100%)、nav はその数百ピクセル下に水平方向に中央揃えされたバーです。それらはヘッダー内の兄弟要素である以外に関係はありませんが、IE7 では次のようにレンダリングされます。

header-overlay は、nav と同じ量だけプッシュされます - なぜこれが起こるのか、私には完全に不可解であり、IE8 を含む他のブラウザーでは発生しません... 助けてください?!