IE7 position:fixed and margin-top problem

Question

I currently have an html setup that looks like:

<section class="topBar">The site's permanent top bar</section>
<header class="body">Some header info here</header>

And a CSS setup like:

.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;
}

The goal is to have topBar stay at the top of the page, and the header and all after it scroll below it.

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).

I've tried changing header from margin-top to top and that doesn't help either.

How do I fix margin-top being ignored?

Here is actually a bug report on it with a test page to show the problem:

Bug report: http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html

Test page: http://feragnoli.com/ie7/

Answer 1

add padding-top:250px to the body tag, and remove the margin-top from the .lower div

Answer 2

Put the SECTION.topBar under the HEADER.body:

<header class="body">Some header info here</header>
<section class="topBar">The site's permanent top bar</section>

since the SECTION.topBar has been fixed position, so the order in the document should not be quite that important...

I just met the same problem yesterday, so the solution above is what i do in my development, since this is a question asked long time before, so it you have a good solution found already, just tell me how please!