title: IE7 position:fixed and margin-top problem
body: <p>I currently have an html setup that looks like:</p>
  
  <pre><code>&lt;section class="topBar"&gt;The site's permanent top bar&lt;/section&gt;
  &lt;header class="body"&gt;Some header info here&lt;/header&gt;
  </code></pre>
  
  <p>And a CSS setup like:</p>
  
  <pre><code>.body { clear: both; margin: 0 auto; width: 600px; }
  
  header {
  height: 46px;
  margin: 30px auto 20px auto;
  }
  
  .topBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  }
  </code></pre>
  
  <p>The goal is to have topBar stay at the top of the page, and the header and all after it scroll below it. </p>
  
  <p>That for the most part works fine. The problem is though that header's top margin is ignored as long as topBar has position:fixed (So when the page loads, header is pretty much hidden below topBar).</p>
  
  <p>I've tried changing header from margin-top to top and that doesn't help either.</p>
  
  <p>How do I fix margin-top being ignored?</p>
  
  <p>Here is actually a bug report on it with a test page to show the problem:</p>
  
  <p>Bug report: <a href="http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html" rel="nofollow">http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html</a></p>
  
  <p>Test page: <a href="http://feragnoli.com/ie7/" rel="nofollow">http://feragnoli.com/ie7/</a></p>