Lor.Dal.Col.blog

CSS TRICK: Fixed in IE

5 08 2006

An annoying problem with IE is that is impossible to “fix” objects on the screen like in Mozilla, with the standard property “position: fixed” of W3C

I read in the book “The CSS Anthology: 101 Essential Tips, Tricks & Hacks” by Rachel Andrew about a trick for fixing a footer bar in IE.

The position “fixed” makes an object be positioned like absolute but it still remains fixed on the screen when the page is scrolled.

NOT QUIRKS MODE, PLEASE:

But that trick wasn’t complete; it didn’t convince me because of two reasons:

It forces IE into Quirks Mode, using a comment as the first line of the file; I don’t like this because Quirks Mode does not support the standards as recommended by W3C. We also have lots of problem with sizes of layers.
She doesn’t create a real substitute for the standard property “fixed”, because in her solution the scrolling layer isn’t as big as the body, and fixed objects are displayed like frames, not like real fixed objects.

Her solution was something like this:

screenshot of Rachel Andrew solution

After various attempts I found the way to really “fix” objects on the screen, not like frames, but like standard fixed objects.

MY WAY:

These are the guidelines of my solution:

I create a layer as big as the window; it can’t scroll in Mozilla, because this browser doesn’t support scrolling divs very well (you can’t use the mouse wheel to scroll), so the body will scroll in Moz.
But this layer, called “IEbody” must scroll with IE, and in this case we do not want the body to be allowed to scroll.
Now we have an artificial body for IE, so if we use absolute positioning in IE with some objects, they will appear fixed on the screen, because when you scroll only the “IEbody” layer scrolls.
Then we can put a layer to make the wrapper box, obviously we have to put it into the “IEbody” layer. Everything in the “IEbody” layer can be bigger than the screen and can scroll.
Now we can fix everything: we only must write tags out of the “IEbody” div, and set “position: absolute”.
We have to write a special line for Mozilla: “position: fixed”, because in Moz we use the standard way, the body scrolls, not “IEbody” layer.
The bigger problem is that the footer covers the scrolling bar if its width is 100%. We can solve the problem using another trick: negative margin. If we write “margin-left: -8px” the footer will be shifted to the left, and the scrolling bar will be discovered.
I assume that the width of the scrolling bar is 8px, it could be false, so we have to try with most of browsers and OS.
We could also use JavaScript to know what the width of the scrolling bar is at the moment, comparing “clientWidth” and “offsetWidth”.

EXAMPLE:

Screenshot of Internet Explorer:

my solution: Internet Explorer screenshot

Screenshot of Mozilla:

Mozilla screenshot

You can notice that we have the same thing with only a few lines of different code for the two browsers.

Here there is the code to do that:

/* CSS FILE */

html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-y: hidden;
}
/* GENERAL LAYERS */
#IEbody
{
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: scroll;
}
body > #IEbody /* only for Mozilla */
{
overflow: visible;
}
#wrapper
{
position: absolute;
top: 50%;
left: 50%;
padding: 80px 40px 10px 40px;
width: 406px;
margin: -177px 0 0 -200px;
}

#footer
{
position: absolute;
left: -16px;
bottom: 0;
height: 100px;
width: 100%;
background-color: Blue;
}
body > #footer /* only for Mozilla */
{
position: fixed;
left: 0px;
}

Here there is the html file; you can notice I don’t force Quirks Mode!

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml11-Strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>let’s try</title>
<style type=”text/css” media=”all”>@import “jungle.css”;</style>
<meta http-equiv=”Content-type” content=”text/html; charset=iso-8859-1″ />
</head>
<body>
<div id=”IEbody”>
<div id=”wrapper”>
Introduzione
Il Decadentismo appare come la somma di …
</div>
</div>
<div id=”footer”>
</div>
</body>
</html>