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

StackOverflow https://stackoverflow.com/questions/1628265

Question

I know that position:fixed; was not supported by IE until IE 7, and it only works in IE 7 if you have a STRICT DOCTYPE.

My question is: "How do I get it work with IE 7 with TRANSITIONAL DOCTYPE?"

Please don't suggest changing a DOCTYPE, as this does not answer my question, thank you.

Was it helpful?

Solution

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).

OTHER TIPS

Fixed position does not work for me even with the Transitional/Strict Doc types. However I am using IE9 in compatibility mode and that is suppose to render using the IE8 runtime libraries. To fix this issue I had to add the following CSS to element.

.elementToBeFixed {
    position: fixed;
    top: 0;
    left: 0;
}

It does not work with Top or Left being missing you have to explicitly set them to zero (or your desired value) for it to work in all versions of IE....Needless to say IE sucks.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top