Ie 6 VS. Position:Fixed

IE 6 vs. position:fixed

Don't support IE6! The sooner people stop hacking sites about for IE6, the less traction it will have and the quicker it will die! Or, add this code after your first style block;

<!--[if IE 6]>  
<style type="text/css">
#sidebar_right, #sidebar_left {
position:absolute; /* position fixed for IE6 */
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}
</style>
<![endif]-->

The result isn't super-smooth, but it does work.

UPDATE

I wasn't too clear on how this should be used; simply add the id (or class) of any elements that have "position:fixed" to the declaration list at the start of the above block and they will behave themselves in IE6.

how to fixed position in IE7 and IE6

IE6 does not support position:fixed.

IE7 does support it, but has bugs.

Ultimately, you will not be able to get this working using pure CSS. You might be able to make it work using a javascript polyfill script that adds newer browser features to older IE versions.

The only polyfill script that I know of which includes this feature is ie7.js / ie8.js /ie9.js. This script adds a whole load of extra features to old IE versions, including position:fixed. It's not perfect, but it might just do the trick for you.

Hope that helps.

You can find out more about the browser support here: http://quirksmode.org/css/css2/

IE6 position fixed problem

Wait I got it, I added position: relative; to the parent div and then it works now... wierd

How can I make my fixed position work in IE6?

IE6 simply does not support position fixed. It's been a hassle many web developers have had to live with. I've used two alternatives:

  • Put the scrollable portion of my content in a separate 100% width/height DIV with overflow: scroll. Then overlay my non-scrollable "fixed" element in a separate div with a greater z-index.

  • Do what Yelp does with the map on the sidebar and reposition the element with Javascript every time the user scrolls.

Fixed positioning in internet explorer?

The problem is that the most popular most used browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard. This has the same effect as having no position at all. Note that IE 7 from beta 2 upwards does support position: fixed; (if you use a document type declaration that triggers strict mode) so I will exclude IE 7 from this fix.



Related Topics



Leave a reply



Submit