bassistance.de

Da ich auf einer gewissen englischsprachigen Mailingliste inzwischen immer bassistance.de in meine Signatur packe, gibt es hier den ersten englischen Eintrag.

While IE7 now supports position: fixed, there is still the need to solve that for IE6 and below. The footer on this page is now positioned with the following CSS styles:

position: fixed;
bottom: 0;

That’s fine for Firefox and Opera. IE7 gets the vertical positioning right, it’s horizontally confused. But that’s easy to fix, too:

left: 50%;
margin-left: -390px;

The value for margin-left is half the width of this layout, just an old trick.

Now to the exiting stuff: position: fixed for IE6 or 5.5/5.0. Starting with an additional stylesheet, included only for IE < 7 via “conditional comments”:

<!--[if lt IE 7]>
<link rel="stylesheet" href="path/to/stylesheet/ie-stuff.css" type="text/css" media="screen"/>
<![endif]-->

Specifying “[if lt IE 7]” says something like “execute the following code only if this is an IE version below (less then) 7”.

In the included stylesheet you can find the following:

#footer {
	position: absolute;
	bottom: auto;
	clear: both;
	top:expression(eval(document.compatMode &&
	 document.compatMode=='CSS1Compat') ?
	 documentElement.scrollTop
	 +(documentElement.clientHeight-this.clientHeight) - 1
	 : document.body.scrollTop
	 +(document.body.clientHeight-this.clientHeight) - 1);
}

Starting with “position: absolute”, the element is positioned absolute, relative to the viewport. “bottom” is reset to “auto” and “clear: both” is necessary for my layout. The value for “top” is now calculated via an expression. This is a IE specificiy extension to use JavaScript from within stylesheet. If “Active Scripting”, that’s JavaScript for IE, is deactivated, the footer is simply positioned below the content, it therefore degrades gracefully.

If you are interested in what exactly that expression is doing: You can find more details in this article on gunlaug.no.