Rendertest

I'll need some bodytext in here, so I might as well explain what's going on here. There's this great deceleration in CSS2 which is only supported by Gekko (Netscape 6 et al) and Opera - it's:

position: fixed;

It works like those irritating Yahoo and Geocity adds which follow you down the page (albeit stutteringly) while you scroll. The position is taken from the viewport itself, rather than the page. IE hasn't got around to supporting it yet.

However, in absolute positioning, those top: and left: declarations are supposed to be relative to the root element. From an XML perspective, the root element is not the body tag, but the html tag. However, IE 5.5 and above have corrected this error, and will do absolute positioning from the html tag, not the body tag, but only if you include a doctype. Naturally, the lovely Gekko behaves properly too. You're probably wondering what the difference is between the html and the body tag. By forcing both to have different borders using CSS, it seems that the body tag always stops after the last piece of text on the page. So if the whole code for a page is a single paragraph, then the viewport will be larger than the body. The html tag, naturally, takes up 100% of the height of the page.

This behaviour is forgiving, however. For instance, if the body tag has a background image attached to it, and this is either repeating or fixed to the bottom of the page, then it doesn't stop in the same place as the paragraph ends. It will continue until it reaches the bottom of the viewport.

So, how do you force the scroll bar to appear on the body rather than the html tag?

body {
overflow: auto;
}

This also hides the scroll bar from automatically appearing in IE. However, there is a complication. Let's say you built a page in which every element was positioned absolutely. By doing this you are removing the blocks from the normal flow of text, so in a sense, the browser is ignoring them, apart from when they are rendered. If all elements are positioned this way, as well as the body having an overflow of auto, then the document has no size, because there's nothing there. Gekko correctly (and, admittedly confusingly) displays nothing. So if we add:

body {
overflow: auto;
height: 100%;
}

... to the above rule, then Gekko is happy.

Let's turn off the html scrolling, then:

html {
overflow: hidden;
}

Finally we need to make sure the html and the body tag are the same size:

html {
overflow: hidden;
height: 100%;
}

All well and good, however, there are some limitations:

• There's that weird effect in Gekko where the background graphic (my face in this case) duplicated. This can probably be fixed by applying the graphic to the html tag, rather than the body tag
• It only works on IE5.5 and above (but on earlier versions, the layer is fixed to whatever corner of the document is specified before that, so degrades seamlessly)
• If the height of the layer is higher than the user's screen resolution, then any links further down will be inaccessible. I've tried adding a lot of content to the layer, and overflow: auto, but the height of the layer is relative to the whole page, not the viewport, so it refuses to scroll. This technique is better suited to advertising or small navbars, rather than larger areas of content.
• You'll have to drop your hacks, and use the doctype. Come on, grow up. It's OK, though, any old doctype will do, even the html transitional loose.
• Irritatingly, my middle mouse wheel doesn't work for scrolling down the page anymore.