Thursday, November 15, 2007

Fixing position: fixed on IE6

Maybe some of you realizes that IE6 doesn't support position: fixed because of its bug. Luckily, there is another bug works in a way that ALLOWS this to be done! Here is the solution besides using javascript to move the element when the user is scrolling:

1. First, put IE6 into "standards mode" by using a strict DOCTYPE.

2. Use IE conditional comments to style the HTML and BODY tags like so:

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

3. Style anything you want to stay fixed as position:absolute.

#menu {
position: fixed;
top: 100px;
left: 100px;
border: 1px solid #ccc;
* html #menu {
position: absolute; /* IE */

4. The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.


Moe said...

Doesnt work.

chamnap said...

Recheck it again. or maybe try the other way:

Anonymous said...

It is extremely interesting for me to read this article. Thanx for it. I like such themes and anything connected to them. I definitely want to read a bit more on that blog soon.

Anonymous said...

Don't stop posting such themes. I like to read blogs like that. BTW add some pics :)

Subscribe in a Reader