Two Drifters » Internet Explorer

Internet Explorer, position fixed and strict mode

Max — Wed, 14 Sep 2011 19:39:54 +0000

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:

Progress Test

[...]

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!

Enable and fix Lectora titles for the Opera browser

Max — Fri, 17 Jun 2011 18:34:37 +0000

Problem: If you publish a title with Lectora, and try to view it from Opera, instead of the title you see an error message

Your browser does not support dynamic html. Please download a current version of either Microsoft">Microsoft'" DESIGNTIMESP=18189>Microsoft Internet Explorer or Mozilla">Mozilla'" DESIGNTIMESP=18192>Mozilla Firefox and try visiting our site again. Thank You.

Solution: You have to modify trivantis.js in line 353 and line 355. The modifications are displayed in bold

this.ns = (name=="ns" && this.v>=4)||(navigator.userAgent.indexOf("Opera")!=-1)
this.ns4 = (this.ns && this.v==4)
this.ns5 = (this.ns && this.v==5)||(navigator.userAgent.indexOf("Opera")!=-1)

IMPORTANT: WordPress fucks up the quotation marks above, fix them by hand!!!

This tells Lectora's code to treat Opera like Netscape Navigator and its derivates. For the title we are developing for the WHO (ICF eLearning tool) it works flawlessly.

This fix is taken from this Lectora forum message, posted by ssneg.

(ssneg also explains why it is not possible to override this.min and set it to true – because Lectora only includes code for IE or NS to display the title contents, like buttons, later on. Thus we need for Opera to "pretend" that it is Navigator. The code works.)

Do you know any other browsers incompatible with Lectora? Please post a comment, and we might find a solution :-)!

Internet Explorer (aka IE) and CSS

Max — Wed, 26 May 2010 15:16:08 +0000

An order problem?

Internet Explorer seems to be picky about the order chained CSS class selectors appear in:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.icon.q_false {background: url(icons/error.png) no-repeat center;}
.icon.q_true {background: url(icons/accept.png) no-repeat center;}

As you can see, it layouts .q_null.icon as intended (one icon, table row has a background color), whereas the other order .icon.q_false is rendered incorrectly.

No – there's something else in the works

This is the result of the "corrected" code:

.q_null {background-color:#f5f5f5;}
.q_true {background-color:#81F7BE;}
.q_false {background-color:#F78181;}

.q_null.icon {background: url(icons/pencil.png) no-repeat center;}
.q_false.icon {background: url(icons/error.png) no-repeat center;}
.q_true.icon {background: url(icons/accept.png) no-repeat center;}

Does it ignore chained classes in CSS completely?

A little research shows: only Internet Explorer 6 ignores chained classes in CSS. Unfortunately it is still used by about 10 % of the online population. Thus, there's no other choice but to rewrite the code to execute with "unchained" single classes in CSS.

jQuery AJAX & Internet Explorer

Max — Wed, 26 May 2010 14:47:45 +0000

Internet Explorer getJSON trouble

This piece of code initially did not work for me on IE:

$.getJSON("../inc/exercise_ajax.php?" + $(this).serialize(), function(json)

FireFox worked without problems.

The reason is that my JSON code was not well-formed. It had a comma (',') too much.

Here's the code which I use in PHP to create my JSON (braces omitted):

foreach($answers as $question => $answer){
$outstr .= '"q'.$question.'": ';
if (isset($_GET[$question])){
if ($_GET[$question] == $answer) $outstr .= 'true';
else $outstr .= 'false';
} else $outstr .= 'null';
$outstr .= ',';
}
echo chop($outstr,',');

You have to chop off the trailing comma – if you don't, IE will choke on it and your callback function won't be executed.

Internet Explorer & AJAX caching

Yes, Internet Explorer caches your requests. You've got to empty the browser cache before testing the fix I mentioned. Also, you should append a unique parameter to suppress caching, i.e. the current timestamp. Example:

var now = new Date();
// submit with AJAX
$.getJSON("../inc/exercise_ajax.php?ts=" + now.getTime() + '&' + $(this).serialize(), function(json)

JQuery Tools and Tabs in IE

Max — Sun, 21 Feb 2010 13:54:27 +0000

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

This works:

…

…