DNN websites, modules, skins and support

Menu: Blog ยป General

DotNetNuke 6 and Internet Explorer 10

By:

Nota bene: er is ook een Nederlandstalige versie van deze blogpost.

Update: the crossposted version of this post on DotNetNuke.com contains some interesting comments.

Over the past few months I ran into the same issue with DotNetNuke 6 websites quite a few times: “I can’t login on my DotNetNuke 6 website with Internet Explorer 10!”

And because Windows 8 ships with Internet Explorer 10 (IE10), and since DotNetNuke 6 websites will not all be upgraded to 7 anytime soon, chances are this issue will become increasingly annoying.

Some users (and/or webmasters) will probably already have discovered that it’s not just the login that fails, but pretty much every postback action. They might even have figured out that the issue can be solved (“avoided” is probably a better word) by putting IE10 in compatibility mode.

image
Compatibility mode button in IE10

But of course, that’s not really a solution. After all, you don’t want to put a message on your website saying something like:

“Sorry, but our website is really outdated so please tell your browser to treat it in a very old fashioned way by clicking the torn page icon up there in the right corner.”

Luckily, a website can tell IE10 itself, that it needs to be viewed in comaptibility mode. And by using the always amazing StyleHelper SkinObject (by my colleague Timo Breumelhof), you can do so, right in your skin file.

How do I do that?

1. Download the latest verion of the StyleHelper SkinObject and install it on your website, the same way you would install any module.

2. Open your skins .ascx file in an editor and registrer the skinobject using the line:

<%@ Register TagPrefix="fortyfingers" TagName="STYLEHELPER" Src="~/DesktopModules/40Fingers/SkinObjects/StyleHelper/StyleHelper.ascx" %>

3. Now, use the skinobject to add the meta tage to your page that tells IE10 to use compatibility mode:

<fortyfingers:STYLEHELPER ID="STYLEHELPER1" AddToHead='<meta http-equiv="x-ua-compatible" content="IE=9" />' AddAtEnd="False" runat="server" />

Note: AddAtEnd must be False, otherwise the meta tag will be injected after the javascripts in the page, and it won’t work.

Done right, the site functions as it should, and the compatibility mode button will not be visible anymore.