Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 560
roman m Avatar asked Oct 27 '09 01:10

roman m


People also ask

What is fixed position in CSS?

In CSS Position Fixed, fixed is a value applied with position property. This position property is used to align the elements at the desired location. This fixed position always sticks to a specific location and it can’t be moved any side of the page. Even we minimize or maximize the page also its position fixed only.

How to get position fixed in IE6?

IE6 doesn't support position fixed. If you really need this to work in IE6, use conditional comments to serve an IE only CSS file and fake position:fixed with CSS expressions. (edited to correct IE version info.) Show activity on this post. I recently wrote a jQuery plugin to get position:fixed working in IE 6+.

What is a fixed element in CSS?

A fixed element does not leave a gap in the page where it would normally have been located. Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used: Example. div.fixed {. position: fixed; bottom: 0; right: 0; width: 300px;

What are the different position values in HTML?

There are five different position values: static; relative; fixed; absolute; sticky; Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.


2 Answers

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

like image 199
bobince Avatar answered Oct 18 '22 01:10

bobince


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.

like image 43
Asad Hasan Avatar answered Oct 18 '22 00:10

Asad Hasan