4

I'm trying to write a widget (which uses UWA syntax) in JavaScript. It works perfectly well in FireFox, but Internet Explorer is being.. bizarre.

Basically, when I first load the widget up, it doesn't display my centre column (which should show the Duty Rota for the day).

Default

However, if I press F12 and go into Developer Console, I can change the Document mode to IE9 standards and get it working correctly.

IE9 standards mode

If I then set the Document mode to Quirks, it displays like this:

Quirks mode

The code that defines the centre column is as follows:

/* [centre] Duty rota */
AllInOne.centreCol = function() {
    var now = new Date();
    var currentDay = now.getDay();

    var DRWeek1 = {
        Monday : {
            BeforeSchool : "HA, MJO, LS, GB, JSA, HA, TD",
            Breaks : "ABO, LL, RR, DR, PHd, JA, VID, AN, LDE, CN, DW, PG, MD, ND, CK, JP, RH, RJ, CC, GB",
            AfterSchool : "GB, CL, MVW, TD/GDO, HL, LS"
        },
        Tuesday : {
            BeforeSchool : "RJ, AN, AS, GB, JSA, SUW, MJO",
            Breaks : "DW, AB, RR, SDI, PHd, LL, ABO, ND, CG, CC, MD, PD, CT, RY, LDE, SC, RH, JR, RC, GB",
            AfterSchool : "GB, CL, MJO, TD/GDO, SUW, AS"
        },
        Wednesday : {
            BeforeSchool : "JP, JC, SM, GB, HSA, HA, CL",
            Breaks : "BW, JR, TG, SD, PHd, JM, SW, MVW, CG, AMO, MDA, KL, VID, CN, SDI, DST, VY, SLH, JH, GB",
            AfterSchool : "GB, MJO, CL, TD/GDO, HA, SM"
        },
        Thursday : {
            BeforeSchool : "SUW, HL, ST, GB, JSA, HL, CK",
            Breaks : "DR, VY, HL, CK, PHd, JC, DST, HS, SC, MDA, AH, PD, NB, AMO, HSM, DM, JOS, SLH, CK, GB",
            AfterSchool : "GB, JOR, JH, TD/GDO, HL, ST"
        },
        Friday : {
            BeforeSchool : "TG, SUW, JT, GB, JSA, JM, JP",
            Breaks : "SW, AB, HSM, HA, PHd, DM, JOS, CT, KL, BW, RY, PG, JA, NB, RC, HS, JOR, AH, GP, GB",
            AfterSchool : "GB, SWA, JM, TD/GDO, JP, JT"
        }
    }

    var DRHTML = '<h2>Duty Rota</h2>';

    switch ( currentDay ) {
        case 1:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Monday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Monday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Monday.AfterSchool + '</p>';
            break;
        case 2:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Tuesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Tuesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Tuesday.AfterSchool + '</p>';
            break;
        case 3:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Wednesday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Wednesday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Wednesday.AfterSchool + '</p>';
            break;
        case 4:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Thursday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Thursday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Thursday.AfterSchool + '</p>';
            break;
        case 5:
            DRHTML += '<p><strong>Before School:</strong>' + DRWeek1.Friday.BeforeSchool + '</p>';
            DRHTML += '<p><strong>Break / Lunch:</strong>' + DRWeek1.Friday.Breaks + '</p>';
            DRHTML += '<p><strong>After School:</strong>' + DRWeek1.Friday.AfterSchool + '</p>';
            break;
        default:
            DRHTML += '<p>No school. Yay!</p>';
            break;
    }

    var DutyRota = widget.createElement( 'p', 
        { 'id' : 'DR', 'class' : 'DR' } );
    widget.body.getElementsByClassName('centre_col')[0].appendChild(DutyRota);
    widget.body.getElementsByClassName('DR')[0].setHTML(DRHTML);
}

Is there something within that function that Internet Explorer doesn't like?

I'm incredibly confused, any help would be greatly appreciated.

EDIT: Full code

Can be found here: http://pastebin.com/n1qFeTnU

ADDITIONAL EDIT: It looks like the Widget Container is forcing the page to go into IE9 quirks mode. As such, it means I have no control over the document mode at all.

So, the question remains, what in my code is it that Internet Explorer in IE9 (browser mode) Quirks (doc mode) doesn't like?

turbonerd
  • 1,234
  • 4
  • 27
  • 63
  • Where is the `widget` object getting created from, or what is it? The `setHTML` method isn't one I'm familiar with. – pseudosavant May 14 '12 at 16:59
  • Hi there. It's the `netvibes UWA` framework which can be found here: http://dev.netvibes.com/doc/uwa. It's a HTML file which gets loaded and uses the `widget.onLoad = function(){}` function to run its code. – turbonerd May 14 '12 at 17:01
  • Does the console (F12 Developer Tools) show any errors when it doesn't work? – pseudosavant May 14 '12 at 17:38
  • Frustratingly, there is no error at all in any of these modes. – turbonerd May 14 '12 at 18:10
  • The first question that comes to mind is "Why is IE *defaulting* to Quirks mode on this site?" That suggests some problems in your markup that might be causing problems in other places as well... – DCoder May 17 '12 at 10:13
  • I've tried changing the `DOCTYPE` etc. I've checked a few other pages I've written in this UWA format, and some typical pages (Google etc) and they're all defaulting to "Quirks" mode. As such, it's likely something to do with our school network's GPO or whatever. However, I've written an entire reward system in this same UWA format which work successfully in IE (albeit with a few code changes; IE doesn't appear to like certain JS statements, but none of those appear in my code above) so the IE settings shouldn't be a major issue. – turbonerd May 17 '12 at 11:54
  • Can you share any more code with us? Nothing stands out in what you have shared up to this point. It would be great if you could create a jsfiddle that would demostrate this issue so we could try it out. – pseudosavant May 17 '12 at 20:26
  • I can post the additional code pseudosavant, but I'm fairly sure a jsfiddle won't work because of the UWA format. I shall have a go, though! – turbonerd May 17 '12 at 23:10
  • I forgot to update my post! Done now. – turbonerd May 18 '12 at 14:55
  • As a note, if you change the document view setting for one tab, it will stick for the entire tab regardless of any other settings – Yuhong Bao May 22 '12 at 05:37
  • Additional information RE document modes added to OP. – turbonerd May 22 '12 at 11:27

7 Answers7

8

Here's a tip, don't use Quirks Mode. It renders as IE5.5 would, and that's even worse than IE6...

Try adding this tag to your file:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 1
    Hi kolink. Thanks for your advice. I actually tried this (albeit with `IE-8` as the `content`), but it stops the widget from ever loading - so I think, unfortunately, this isn't an option. Bizarrely, I've just tried your code now, and it hasn't changed anything. I don't understand! Oh, and I hate IE. – turbonerd May 14 '12 at 16:56
  • 1
    A word of caution: "Because edge mode documents display webpages using the highest mode available to the version of Internet Explorer used to view them, it is recommended that you should only use this document mode for testing purposes only. Do not use it for production uses." - http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx – Anna Brenden May 14 '12 at 17:04
  • I'd disagree with that logic. Going forward you'd never want to write your HTML for one specific rendering engine. You'd never do it for Chrome, FF, Safari, etc, so why do it on IE? Just request `edge` and write valid HTML5 code. – pseudosavant May 14 '12 at 17:37
  • @pseudosavant "Going forward" is the key phrase. We don't always have the ability to rewrite pieces of an existing application or to start new. For legacy support reasons, the edge document model isn't always an option. IE hasn't provided the kind of smooth transition from one version to another that other browsers are now doing. Hopefully, Microsoft will do that with IE 10 and beyond. – Anna Brenden May 14 '12 at 18:46
  • @EricBrenden we'll have to agree to disagree on that one. Might want to add some animated GIFs that say best viewed with Netscape Navigator while you are at it. IE9 and IE10 are just as HTML5 compliant as any other browser (if not more) now. The IE4-6 (browser wars) debacle is over. – pseudosavant May 16 '12 at 23:41
  • I've updated my original post to indicate that, upon investigation, I've come to realise the document mode is out of my hands. Thanks for trying. – turbonerd May 22 '12 at 11:26
2

Firstly, try removing the xml string, <?xml version="1.0" encoding="utf-8"?>, you have before your DOCTYPE. Even for XHTML it should not be necessary. Having anything before your doctype can trigger quirks mode. W3C schools says the XHTML doctype should be the first line of the document as well.

I wanted to run your code, so i could try this for myself, but I cannot because your pastebin sample doesn't include the actual framework so the script breaks when it gets to the undeclared "widget" variable.

EDIT: I forgot to mention, that if the above works, but you still need to declare your UTF-8 encoding, you can use a meta tag to do so.

Finally, if the above doesn't work and you're sure compatibility view is not your problem (check 'tools\compatibility view settings`), you could try debugging this by removing your style sheets and confirming that the functional code is working properly.

My guess is your widget is there, but hidden by poorly rendered CSS, some float or z-order or maybe display setting being misinterpreted. Slowly adding styles back in might help you narrow in on the thing that's going wrong so you can work around it.

I noticed, here, that all widgets are run in IFRAMES. In IE, IFRAMES are rendered in quirks mode if the framing page is in quirks mode. I'm not sure that's relevant since you say the widget itself is what's forcing quirks mode, but it's worth keeping in mind.

jatrim
  • 697
  • 6
  • 10
1

First thing to check is the compatibility view settings. It can be set to default to IE7 mode for example.

Yuhong Bao
  • 3,891
  • 1
  • 19
  • 20
1

If you want to be backwards and cross browser compatible, the easiest fix IMO would be to set the doctype to HTML5 <!DOCTYPE html>. All major browsers support this, and this forces IE8 into Standards mode, as you can verify here. I had some difficulty extending the Event prototype in IE8, switching to the HTML5 doctype did the trick for me there. While, normally, IE8 is not a big fan of augmenting dom objects this did work, no problem. No telling what you can force IE8 to do next with this ninja-knowledge :)

UPDATE:

I've had a look at your pastebin, and I was just wondering: did you remove both 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:frog="http://fdp.frogtrade.com/ns/">

Lines? replacing them with <!DOCTYPE html>? At first glance, this is what MS suggests, too. Could you tell me what the headers look like now? I'll try to replicate this problem, since I am somewhat intrigued by it :D

Update2:

As jatrim pointed out: widgets are rendered in iFrames, as far as IE goes. In which case, setting the doctype to <!DOCTYPE html> won't force standards mode, if the parent document is rendered in quirks mode. Perhaps you could check to see if setting the parent document to <!DOCTYPE html> does the trick.

Community
  • 1
  • 1
Elias Van Ootegem
  • 74,482
  • 9
  • 111
  • 149
  • Hi Elias. Thanks for that, it would've been a lovely quick fix. Unfortunately, this is IE9, and when I implement your tag nothing changes. The browser mode is "IE9" but the document mode remains in "quirks mode" :( – turbonerd May 22 '12 at 11:20
  • Ahah - I've added some additional information to my post which explains why your code doesn't work. Thanks for trying. – turbonerd May 22 '12 at 11:26
0

I don't think it's important how IE displays your page in Whatever-Mode. If IE9 for example is not rendering your page in Quirks-Mode by default, why do you then have to fix bugs there? No-one (excepted by some crazy people) will, just because they can, force their IE to a rendering-mode that's not used by default.

My way to check the browsers is:

  • Download a virtual machine for each IE version http://www.microsoft.com/en-us/download/details.aspx?id=11575 or create it yourself

  • Create a favorite with the following code as URL:

    javascript:(function(){var%20vMode=document.documentMode;var%20rMode='IE5%20Quirks%20Mode';if(vMode==9){rMode='IE9%20Standards%20Mode';}else%20if(vMode==8){rMode='IE8%20Strict%20Mode';}else%20if(vMode==7){rMode='IE7%20Strict%20Mode';}alert('Rendering%20in:%20'+rMode+"\nId: "+vMode);})();
  • Open your page and execute the code above by clicking on the favorite
  • You'll now get a message-box where you can see which mode your page is rendered in

Be aware! This script does just handle the IE Versions 6-9. In IE10 it will probably show you every time that your page is displayed in Quirks-Mode. Therefore I added the Id that you can see the real document-mode :)

If your page is (by default) rendered in Quirks-Mode, I'd search for what is triggering it and get rid of it before you start fixing rendering-bugs for IE5.5 in a CSS that's included in newer browsers.

More details about Quirks-Mode: http://www.quirksmode.org/css/quirksmode.html

SimonSimCity
  • 6,415
  • 3
  • 39
  • 52
  • Simon, thanks. The widget that I'm working on is for the Frog VLE which uses the UWA widget standard. As such, the widgets I'm displaying are contained in a Frog HTML page which - for some reason - are being rendered in IE9 Quirks mode by default. Frog doesn't (easily) support use of other browsers, so our entire school will be using the same version of IE9 to access this widget. As such, I need to fix the code in this specific browser mode. – turbonerd May 23 '12 at 13:26
  • @dunc: Do you know why the browser switches to Quirks-Mode? The example-code you posted does not really help. I only get "_widget_ is undefined. test.html, Line 333" ... Otherwise: use what Kolink suggested ... that should enforce the newest possible rendering-engine available. – SimonSimCity May 23 '12 at 17:45
0

As getElementsByClassName was only introduced in IE 9, I'm going to guess quirks mode doesn't let you use it.

i.e. right at the end of your code, you fail to append the DutyRota

searlea
  • 8,173
  • 4
  • 34
  • 37
  • I thought something along those lines too. However, if you look at the full code sample, the other `getElementsByClassName` calls work correctly. – turbonerd May 24 '12 at 11:31
  • The full code sample's disappeared now, but were the other calls to `getElementsByClassName` referring to the parent document, not the `iframe`? If the parent was running in standards mode, it'd be able to call `getElementsByClassName`, while the widget iframe running in quirks mode wouldn't. – searlea Jun 25 '12 at 13:42
0

If it is an IFRAME, note that if the parent page is in the IE9 standard mode, the child page can only be in this mode or the "quirks mode emulation" mode. To get true quirks mode in an IFRAME the parent page has to be in an IE8 or earlier mode, in which case no child pages can be in IE9 mode, only in IE8 or earlier modes.

Yuhong Bao
  • 3,891
  • 1
  • 19
  • 20