Internet Explorer, position fixed and strict mode
Wednesday, September 14th, 2011You want to use fixed positioning with CSS
If you want to make use of the simple CSS position:fixed; to display an element static to the viewport, you will run into problems with the Internet Explorer.
position:fixed is only supported since Internet Explorer 7
I tested this solution with IE 7.0.5730.13 on Windows XP. IE 6 does not support fixed positioning.
You need to enforce strict mode
Internet Explorer will default to "quirky rendering mode", if you don't add special tags to your HTML document:
<!DOCTYPE html>
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Progress Test</title>
<meta http-equiv= "X-UA-Compatible"content="IE=Edge">
<script language = "JavaScript" src="../head.min.js"></script>
[...]
Both are essential! If you try IE 9 on the page without having added the meta tag X-UA-Compatible, it will render the page in quirky mode. And in quirky mode, it will ignore your position:fixed, and render your element where you have put it in the flow of the document.
Please note: I have read that this meta tag actually is not valid for this DOCTYPE.
It still does not work? I am testing with local documents!
Internet Explorer also takes into account where the element is being served from. This solution will work, if you upload your test documents to a server and access them over the Internet. It will not work (see note below) for local files, even if you use a local webserver to serve up the files (i.e. XAMPP). Internet Explorer will render your document in quirky mode, in this case.
Note: actually it does work offline (opening a document from the harddrive) in Internet Explorer 9 after fiddling somewhat with the document. I removed a IE compatibility script (not shown above), which I had included from Google previously. Check if you have one of those, and remove it!
