IE7 - margin: auto affectant élément frères et soeurs

Question

étrange IE7 bug que je n'ai aucune idée ...

Heres le code 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> 

Et le CSS applicable:

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! */ 
} 

Fondamentalement, la superposition des en-têtes est censée prendre toute la largeur de la page en haut (donc largeur: 100%) et nav est une barre qui est centrée horizontalement à quelques centaines de pixels en dessous. Ils ont aucun rapport autre que d'être des éléments frères et soeurs dans l'en-tête, mais IE7 les rend comme ceci:

tête-recouvrement est poussé le même montant que nav fait - tout à fait déconcertant pour moi pourquoi cela se passerait-il, et il ne se produit pas dans un autre navigateur, y compris IE8 ... aide, s'il vous plaît ?!

Answer 1

Ajouter cette css

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

L'absolu div pense qu'il devrait commencer Whee le contenu commence, et que le seul contenu que vous avez est le nav, il est embrouillé