Essential and IE9

Essential and IE9

by Gareth J Barnard -
Number of replies: 8
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Moodlers,

I'm slowly trying to get to the bottom of why since 2.7.8 of Essential that it does not work with IE 9 - or at least it does not work for others with IE 9, I have never replicated.  So, on a hunch I have changed the code such that html5shiv only kicks in when you are running (if you dare) IE 8 or less.  Therefore if you have a test server, then please try this beta: https://github.com/gjb2048/moodle-theme_essential/tree/MOODLE_27 using the 'Download ZIP' button.  Please do not install on a production server as the version number has been increased and going back is difficult.

This is what it looks like for me (bar the pixelation for the 100K forum image constraint.

Cheers,

Gareth

Attachment 2014-12-07 13_43_00-Moodle 27 University of Software Engineering - Internet Explorer_md.jpg
Average of ratings: -
In reply to Gareth J Barnard

Re: Essential and IE9

by Mauno Korpelainen -

I noticed last week on our fresh production server (2.8.1+) that in one of our school PCs IE9 and the latest Essential from your GIT everything in menu bar was somehow "hidden" or mixed - it was not even possible to find Login there

When I tried to replicate that at home everything looked normal but I have IE11 at home and obviously the problems were not visible in emulation mode. Therefore I changed the default theme to More and promissed to switch Essential back when things get sorted with this strange IE9 thing...

Probably very few moodlers have tested the latest Essential with IE9 - but I wonder if this has something to do with those fixes you and Mary did last week (relative positions...)

I could check that PC tomorrow at work.

In reply to Mauno Korpelainen

Re: Essential and IE9

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Mauno,

But I doubt it as IE9 has been an issue for a while: https://github.com/gjb2048/moodle-theme_essential/labels/IE9.

Also, please kindly read my comments where the words 'production server' and 'Moodle 2.8' are combined with the theme on: https://moodle.org/mod/forum/discuss.php?d=276343

The thing is I have never been able to replicate the issue and therefore undertake a 'binary chop' method of deduction to find where the problem is.  Ultimately the correct solution is to upgrade from IE9 as Microsoft so desperately wants the planet to do so.

In reply to Gareth J Barnard

Re: Essential and IE9

by Scott Karren -

Gareth,

Looking at the version this is for Moodle 2.7.x, is that correct?  Is there any reason this would not work on a 2.6.x branch?

I would really like to test this to see if it resolves some of the issues I have had with IE9.

Scott

In reply to Gareth J Barnard

Re: Essential and IE9

by Martin Greenaway -

Hi Gareth,

I think I have some ideas about the issues being experienced.  The issues I'm seeing are as follows:

This is how it would be expected to be seen, in Chrome: Image of the expected display from Chrome

This is how it appears by default in IE9:This is the broken display in IE9


It seems that the header items are not floated correctly - I have fixed this to some extent by applying the IE9 float right fix detailed here: http://stackoverflow.com/questions/15665477/css-issue-with-ie9-and-floating-divs-aligning

This however only seems to work to separate the branding/courses and the user/messaging/gotobottom sections; it didn't seem to work to sort out the incorrectly ordered items on the right.  I then had to manually set the background colour of navbar-inner, and override the strange filter settings back to initial.

Also, I manually overrode the background of blocks, and spaced the header of the main page block so it didn't overlap the dot image.

Acceptable appearance with amended CSS in IE9

Here's the General CSS I've used to do this - I've got this to an acceptable state, in my opinion, and have tried to tidy up further in other areas but with no success.  Unfortunately our client's standard Win7 build uses IE9, and our project doesn't carry enough clout to overcome the inertia of change for whatever reason.

/* ***************************
   (Kind of) fix broken header
   *************************** */
.custommenus {
 width: 100%;
}
.custommenus .pull-right:before,
.custommenus .pull-right:after {
 display:block;
 content: " ";
}
.custommenus .pull-right:after {
 clear: both;
}
.custommenus .pull-left:before,
.custommenus .pull-left:after {
 display:block;
 content: " ";
}
.custommenus .pull-left:after {
 clear: both;
}
.navbar-inner {
 padding: 0px 10px 0px 10px;
 border: 0px;
 min-height:40px;
 background-color: #393;
 background-repeat: initial;
 border-radius: initial;
 box-shadow: initial;
 filter: initial;
} /* ********************************** Put some space between breadcrumbs ********************************** */
.breadcrumb li {
 padding-right: 10px;
} /* ***************************** Fix content block backgrounds ***************************** */
section,
.block {
 background-color: #fff;
} /* ************************* Fix category combo header appearing on top of the dotted background ************************* */
#frontpage-category-combo {
 padding: 20px 5px 5px 5px;
} /* ************************** (Kind of) fix Awesome icon lack of spacing
************************** */ #essentialnavbar i,
.header i,
.content i {
 padding: 0px 4px 0px 4px;
}

I also found the following link, from which you can download virtual machine images of Windows installs with older IE browsers.  It's been really helpful, I've no idea if this is something that the rest of the world has known about for yonks, but thought I'd put it out there:

Although, in doing the images, I've just realised the logo is still missing ... sad  More to do!

Average of ratings: Useful (2)
In reply to Martin Greenaway

Re: Essential and IE9

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Martin,

Looks like a good work in progress.  Perhaps if prefixed with 'body.ie9' then would only target IE9.

Cheers,

Gareth