Script working dependent upon IE document mode

Question

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).

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

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

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?

Answer 1

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" />