So, it seems the latest version of the TwentyEleven WordPress theme is incompatible with Internet Explorer 9. It took me a little while to find the fix – maybe because I wasn’t really sure what I was looking for – but thanks to a closed query on WordPress.org forum, today I found the answer (almost).
At first, I thought it was something I had done when customizing the themes, but couldn’t figure out what. Previous customizations using TwentyEleven were OK, just the last couple I had worked on were not displaying – in fact one I had worked on in the past week was fine. However, two brand new installations that were OK in IE 8, Firefox, Chrome, Safari, in the Facebook app on my iPad etc., were not displaying in IE 9; they were blank as if they did not load. But when I checked the source code, it was all there.
Carly’s Journey in Internet Explorer 9 – now fixed and visible
I was baffled, since I really didn’t change much in the second website, as it was a quick freebie to help with fundraising for my friend who’s daughter has been selected to represent Canada in the 2013 Maccabiah Games in Israel. I had moved things around in the header a bit, added a WOW slider, changed the colours, etc, etc, and added a couple of useful plug-ins, nothing out of the ordinary. So why wasn’t it visible in Internet Explorer 9, but OK in other browsers?
I had tried to find out why these two sites were not displaying last week as soon as I realized they were not displaying – going on Google to see if there was a compatibility issue (a major issue I have when installing HTML5 websites in a directory under my own website – which still uses XHTML Transitional). But I did not find an answer. So I thought maybe it was just my IE playing up because of the compatibility setting.
But then it happened to a third WordPress installation that I set-up yesterday, and I hadn’t even touched this one – apart from adding a couple of plug-ins (All in one SEO pack and a widget editor) and then a couple of Google web fonts this morning.
WordPress.org home page in Internet Explorer 9
It was when I saw that this one was not working but a sister site using the same theme but installed earlier this year was fine, I wondered if it was an errror in the code that was a problem. Maybe a closing tag missing, or one too many, in the post or page content? But why would it affect the whole site?
Perhaps an incompatible plug-in. So, I removed the widget editor first since this one was being used on the other two sites, but it still had the same issue. So it wasn’t that.
So I validated the website, and sure enough, there were a few errors but there were no closing or missing tag errors. Apparently TwentyEleven is using a lot of code that isn’t recognized yet – even their own site has 10 errors. But these were not the problem.
And, when I punchned www.wordpress.org into IE9 address bar, it too was just black!
WordPress.org home page in Internet Explorer 9
That’s when I knew it was definitely not something I had done and went on the hunt for a fix again.
Turns out it was a simple fix – remove the two fonts “Helvetica Neue” and Helvetica in the style sheet. It worked! But I have no idea why. Most sites I’ve created in the past that use sans serif fonts, include Helvetica in the font family, so why does it not work with WP TwentyEleven? If you have the answer, can you post a comment below?
I have now remedied the issue. However, one website is still a bit iffy, in that it appears, but then disappears when I scroll. And, not only that, even the W3C Validator website, which uses XHTML Transitional not HTML5, when I checked it in IE9, it too did not display at all – just black – like WordPress.org. So, despite fixing the issue with two of my own websites, there must still be an issue with Internet Explorer 9.
If anyone knows of another fix that remedies this issue completely (I would like to fix the third website which is only almost fixed), please let me know.
