Fixed Position for IE6
Trade-Off: IE6 treats all "absolute" or "relative" blocks as fixed when using this scheme.
This DIV is located inside #content:
position: relative;
float: right;
width: 125px;
The fixed-position menu at left is created through the standard CSS-2 rule "position: fixed".
To make this work in IE6, the following rules must be declared:
-
* html { overflow-x: auto; overflow-y: hidden; }
turn off regular vertical scrollbar
- * html body { overflow-y:auto; height:100%; margin:0; }
height: 100% makes body just the height of viewport
overflow-y:auto creates scrollbar on body
margin:0 shifts body's scroll bar over missing html scrollbar
(only margin-top and margin-right need to be 0) - * html #menu { position: absolute; }
since body is only as tall as viewport, absolutely positioned menu doesn't budge
The incredible Stu of "cssplay" discovered these complimentary bugs in IE6.
He doesn't emphasize (on his demo page, anyway) that this doesn't work in quirks mode.
You must use an XHTML DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
The drawback of this scheme is that all block elements which are "absolute" or "relative" become fixed in IE6, too — regardless of their containing block. "top: 100px" works as it should, but "right: 0px" does not. (FLOAT on a static block works as well as it ever did in IE6.)
- This list
- extends
- the document
- so I'll have
- something to
- scroll
- This list
- extends
- the document
- so I'll have
- something to
- scroll
This concludes our test.