Two Drifters » IE http://blog.ideaday.de/max Off to see the world. Sun, 05 Feb 2012 16:48:05 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Internet Explorer, position fixed and strict mode http://blog.ideaday.de/max/2011/09/internet-explorer-position-fixed-and-strict-mode/ http://blog.ideaday.de/max/2011/09/internet-explorer-position-fixed-and-strict-mode/#comments Wed, 14 Sep 2011 19:39:54 +0000 Max http://blog.ideaday.de/max/2011/09/internet-explorer-position-fixed-and-strict-mode/ 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 [...]
]]>

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!

]]> http://blog.ideaday.de/max/2011/09/internet-explorer-position-fixed-and-strict-mode/feed/ 0 JQuery Tools and Tabs in IE http://blog.ideaday.de/max/2010/02/jquery-tools-and-tabs-in-ie/ http://blog.ideaday.de/max/2010/02/jquery-tools-and-tabs-in-ie/#comments Sun, 21 Feb 2010 13:54:27 +0000 Max http://blog.ideaday.de/max/2010/02/jquery-tools-and-tabs-in-ie/ 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, [...]
]]>

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 –>

]]> http://blog.ideaday.de/max/2010/02/jquery-tools-and-tabs-in-ie/feed/ 0