How to Get "Position:Fixed" CSS to Work in IE 7+ with Transitional Doctype

How to get position:fixed css to work in IE 7+ with TRANSITIONAL doctype?

You don't need a Strict DOCTYPE for fixed support. You only need a DOCTYPE that triggers Standards Mode (or ‘almost standards’). That can be a transitional doctype such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

as long as the system ID (the URI at the end) is included.

If your pages really are relying on Quirks Mode (ugh!), I'm sorry but you cannot use fixed and will have to resort to JavaScript hacks (but then you might need those for IE6 anyway).

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/

Using jQuery to set position from absolute to fixed in IE7 & IE8

I found a solution.. I ended up using classes instead and this worked.

if ($('body').hasClass('content-article')) {
//Pulling the top position value of the article header so the share tools align with it always
var uf = $('.utilsFloat');
var topValue = $('.article .header').offset().top;
uf.css({top : topValue });

$(window).scroll(function() {

    var fixedShareTools = $(window).scrollTop() >= topValue;

    if (fixedShareTools) {
        uf.removeClass('absolute');
        uf.addClass('fixed');
    }
    else {
        uf.removeClass('fixed');
        uf.addClass('absolute');
        uf.css(top, topValue + "px");
    }});}

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.

CSS Position Fixed Not Working in IE 11

Try using position: expression(fixed);
Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.

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 Get "Position:Fixed" CSS to Work in IE 7+ with Transitional Doctype