Sep 142011
 

You 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!

Feb 212010
 

Internet Explorer's refusing to work with the tabs – that is, the first two tabs work then everything breaks. Firefoxy and Opera do what I intend them to do. Have I mentioned that cross-browser developing can be a burden?

It turns out, that Internet Explorer has a problem with the <FORM> not wrapping around everything, but being split up between DIVs.

This does not work with Internet Explorer:

<div class="panes">
<DIV>
<form action="/" method="post">

</DIV>
<DIV>

</DIV>
<DIV>
</form>
</DIV>
</DIV><!–closing the panes–>

This works:

<form action="/" method="post">
<div class="panes">
<DIV>

</DIV>
<DIV>

</DIV>
<DIV>
</DIV>
</DIV><!–closing the panes–>
</form><!–form wraps around the panes –>