CSS bug, 2 backgrounds, 1 page, gap at bottom of page

[scem0]

The Problem

I have an absolutely positioned image behind my content. It's a header image:

it's positioned absolutely in the center via negative margins (left: 50%, margin-left: -633px).

the background of the page is the lower portion of that image, tiled vertically. This is the image that is tiled:

The problem is that the tiled image is centered (in internet explorer and safari, I believe) according to the total width of the page, while in firefox it is centered according to the section of the page being viewed.

FIREFOX

Being that the top graphic is 1266px wide, it stretches the page so that it needs horizontal scrollbars. That's easily remedied with a simple overflow-x: hidden, but since internet explorer centers the background image according to the center of the total page size, it accounts for the extra width from the header graphic and puts it off center:

INTERNET EXPLORER

I don't know how to fix it. If I could get the page to render the header graphic without accounting for its size, it would fix the situation, but I don't know how I could do that.

Thanks everyone!

Emerson

 

[scem0]

ignore this post: this was a post in response to my original problem, and my 'solution' caused the above problem.

UPDATE:

I think I may have fixed it via absolute positioning. It's now working in firefox.

No thanks to macrumors, after all .

Emerson

 

[Stampyhead]

It's now working in firefox.

But not in Safari or in IE 6 on Windows. Back to the drawing board with you!

 

[scem0]

But not in Safari or in IE 6 on Windows. Back to the drawing board with you!

I know . I've been trying to puzzle it out with no luck for the past hour or two.

The problem is that in some browsers, a centered background is centered according to the total page size, and in others (firefox) the background is centered according to the current width of the window. Meaning it would display perfectly in all browsers if the width of the top graphic didn't stretch the width of the page past the size of the browser window, but my top graphic is 1266 pixels wide, so it'll stretch 90% of people's windows.

Is there some way to make the top image display as though it were a background? ie. not stretch the body window?

Emerson