Fixed Header - Body scrolls under it, why??

I just recently setup a fixed header (IE: http://limpid.nl/lab/css/fixed/header) and I'm trying to get it so the body doesn't scroll underneath the header.

What I mean is this, my header consists of an advertisement banner that doesn't cover the width of the screen and I am using the websites background image as the header background image to fill the extra space (so everything blends nicely between the header & body). However, the content in the body will scroll over the header background image. Thus the banner appears to be simply floating over everything (as opposed to looking like a header).

When I use a background color everything is fine, the body doesn't scroll onto/under the header.

So how do I get that nice flush header cutoff while still maintaining my background image?

 

position: fixed;
when the user scrolls the page, the element does not scroll with it, it just says exactly where it was.

 

I tried placing the position: fixed in various places, didn't see any benefits.

Here is my current code:

<style type="text/css">
 body{
  margin:0;
  padding:100px 0 0 0;
 } 
 div#header{
  position:absolute; top:0;
  left:0;
  width:100%;
  height:100px;
background-image: q2.gif;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>

Code (markup):

 

sorry, I meant to test it without position:fixed. remove it completely and see what happens.

 

Thanks for the reply again. Removing the position:fixed; disabled the headers ability to scroll at all. Essentially it made the header look like it was just inserted on top of the body, when you scroll down the header doesn't follow.

 

ahh, I must have misread your question. I'm trying to look at your site right now but it seems to be down

 

I don't have my site listed anywhere so what makes you think its down?

Do you have any messenger programs (AIM, MSN, etc.)? I'll give you $5 paypal for helping.

 

The url in your original post (http://limpid.nl/lab/css/fixed/header) isnt the site you're trying to fix?

No, I haven't used IM in about 4 years. Too distracting. I'm leaving work soon but will check back later to see if you were able to figure it out.

 

That URL is the place where I got the header code, also has an example of a header.

Using that URL as a base though. If you look at it, and scroll the page the header is unaffected (the header remains intact the entire time). When I change the background color to a background image and then scroll the page, the body content runs over the background image.

Actually typing that out I think I know how to fix it.

*goes to try*

 

Well I disagree with the way they're doing the trick anyway : ) They're relying on putting IE in quirks mode. That'll cause you problems for the rest of your page styling : )

Paul O'brien's got a few good ones, I'll send them your way...

This one's a fixed footer, but same technique: http://www.pmob.co.uk/temp/fixedfooter_mine.htm
header and footer:
http://www.pmob.co.uk/temp/fixedlayoutexample2.htm

He's got a gazillion of them: http://www.pmob.co.uk/temp/
search for "fixed"

Ie6 is usually the issue : ) It does not understand fixed so both Paul's site and the limpid site are imitating it with a trick .

 

soulscratch also has a setup he uses - check it out at www.soulscratch.com/code/css/header-footer-fixed2.html

 

Yeah and oops! I didn't see that paul was also setting IE6 into quirks mode. Might work for the trick, but that's a b*tch to style the rest of the site in.