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.

4 comments:

Moe said...

Doesnt work.

chamnap said...

Recheck it again. or maybe try the other way: http://ungsophy.blogspot.com/2008/03/fixed-position-in-ie.html

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