Firefox Background Image Problem

[mannyotr]

For the life of me I can't figure this out.

The background image I am trying to use displays properly on IE, but in Firefox it does not scroll all the way to the bottom as I would like.

Here is my site:
http://www.windermereroadies.com/index2.php

And here is the CSS code:
http://www.windermereroadies.com/css/main.css

Please help!

Thanks!

Manny

[ edit ]

I should clarify that when I increase the content on div:content (middle column), the background image moves correctly. The problem only happens when the lenght of one of the side columns is longer than the middle column.

[Twey]

On

Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.8.0.1) Gecko/20060311 Firefox/1.5.0.1

I see no background image at all. Probably because http://www.windermereroadies.com/images/body_bg.gif doesn't exist.

[mannyotr]

I see no background image at all. Probably because http://www.windermereroadies.com/images/body_bg.gif doesn't exist.

It's there. But it's under css/images/body_bg.gif.

It's the red/black lines at the bottom of the page.


^^ These.

[Twey]

Aha, I see. Yes.
In this case, try:

background-position: bottom;

[mannyotr]

Thanks Twey, but no go. =(

It still overlpas the sidebar content (in Firefox only).

[mannyotr]

I just added some content to the div:content area (making it longer than the sidebar content), which in turn 'pushed' the background image down. So as long as I keep the div:content area longer, it should be no problem.

However, I would still love to know how to fix it for future reference.

Thanks!

Manny

[mwinter]

Thanks Twey, but no go. =(

As a brief aside, with what Twey suggested, you can reduce that background image to just the black and red part at the bottom. You already explicitly specify a background colour (very good) and bottom padding.

It still overlpas the sidebar content (in Firefox only).

In Opera, too, and they are both correct.

Your sidebar is absolutely-positioned. This means that it is taken out-of-the-flow; it doesn't affect the layout behaviour of other elements around it. As a result, the body element ignores the sidebar when determining its height.

One fix is to float the sidebar to the right, then place an empty element after it with a clear declaration. This will force that element to a position below the sidebar, whatever its height, stretching the body element in the process.

Mike

[mannyotr]

Thanks Mike (and Twey)!

I will try making those changes and see how it works out.

Thanks!

Manny