CSS Scrolling bug

[Merrissey]

http://www.filterone.net

The problem only seems to appear in Firefox, try resizing the browser so that not all of the content appears on the screen and a scroll bar appears. Use the scrollbar and you'll see that the background doesn't stretch to fit anymore.

Any ideas would be much appreciated.

[Acidic]

I'm sure someone like CB will have much more to say about this, all I can say is that neither the HTML nor the CSS validate. So don't blame the browser quite yet.

[CornedBee]

Don't blame the browser at all. This is a case of IE behaving incorrectly in a way that trips most authors.

Specifically, if height is specified, then the height of the element is exactly the specified value, no more, no less. You specify the height of the content div as 100% of the containing box, which is frame, which has as height 100% of the containing box, which is body, which has as height 100% of the containing box, which is the viewport!
In other words, the content div is exactly as high as the viewport. No more, no less. Thus, if the viewport is shorter than the space the content requires and you scroll down, you realize that the content div doesn't go there. The actual content - the ps - overflows according to the overflow rule. It is still visible.

IE behaves incorrectly in that boxes expand to hold their content even if the height is explicitely specified. It thus behaves as if the height property was a minimum height, not a definite height.

What you want, therefore, is to specify a minimum height. You do that with the min-height property. IE doesn't support it, so you have to work around that.

The usual solution goes along the lines of:

#thediv { min-height: 100%; }
some_IE_hack #thediv { height: 100%; }

Here are some suggestions:

* html #thediv

This works because IE incorrectly believes that there is some mystery tag around the html - or perhaps it allows * to match nothing. Either way, this selector applies to nothing in all browsers but IE.

#thediv { _height: 100%; }

IE's CSS parser is so incredibly forgiving that it doesn't mind some random characters in front of the property name. This doesn't validate.

#thediv { height: 100%; h\eight: auto; }

This goes the other way. It specifies height as 100% for all browsers, and then goes on and resets it to auto in browsers with a proper parser, which correctly ignores the backslash. The backslash might have to be at the start of the word, I'm not sure.

<!--[if IE] !><link rel="stylesheet" href="ie_specific.css"><! [endif]-->

The IE conditional comments are very useful for presenting any HTML only to IE. ie_specific.css would then contain the IE-specific rules.

[Merrissey]

Thanks for taking the time to reply. It sort of fixes the issue in the sense that nothing changes when you scroll down, the problem now is that it only stretches to fit the content, rather than to fit the entire height of the page. Know if there's any solution?

[CornedBee]

Uh... I think that's a bug then... must have something to do with all the floats.