Site Layout Breaks in IE9 Compatibility Mode

[cei_Tim]

Hello,

I’m hoping someone here can help me out with my wordpress site so that it renders properly in IE9 compatibility mode. It renders the same broken layout in IE7 but I’m not as concerned with that.

The site is http://www.claimslink.com

I’ve validated the site and there are two errors, which I’m not sure how to fix. Here’s a link to my validation info:

http://validator.w3.org/check?uri=www.claimslink.com&charset=%28detect+automatically%29&doctype=Inline&group=0

Is the lack of 100% validation causing this issue? Is it a plugin or is it theme?

Any help here would be MUCH APPRECIATED!

Thanks!

[Alen]

Internet Explorer.

Nuff said!

It doesn’t look like you can enforce this from your side. https://support.google.com/a/answer/181472?hl=en

But there should be no reason why anyone would turn this feature on while visiting your site. Since it’s compatible with current standards. Compatibility View is for old sites that were built for IE6/7.

[Senff]

“If this site is not rendering correctly in Internet Explorer, please turn off Compatibility View.”

Regardless of whether or not that’s true, this is a very user-unfriendly message. It basically says “if something’s broken here, it’s your own fault“. I’m not sure why you would want to put it on a site in the first place.

[cei_Tim]

I agree with you about that message – that was a decision made by a higher-up that has since been changed.

So compatibility mode basically renders it as IE7 would, correct? What percentage of users use IE7 anyway, less than 2 percent? Do you guys still worry about IE7 users any more? And doesn’t compatibility mode break more sites than it fixes at this point? I can’t understand why anyone would turn it on if the site rendered fine in standards mode.

Is this really even an issue we should be concerned with?

[Alen]

Is this really even an issue we should be concerned with?

No.

In a nutshell, Compatibility View allows content designed for older web browsers to still work well in Internet Explorer 8. – source

[cei_Tim]

Thanks a lot Alen!

Let’s just say hypothetically I was asked by my bosses to fix the issues with IE7 – does anyone know how I should go about it?

[paulob]

Hi,

You can stop clients switching on compatability view by using the meta tag as follows:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

That will tell the browsers to use the latest rendering mode. IE7 will still be broken but other browsers won’t be switched into IE7 mode.

Why MS thought it was a good idea to have compatibility view is beyond me as it causes 99% more problems that it cures. A lot of people click the compatability icon accidentally and have no idea what it does. (Note intranet sites do not obey the meta tag and need the headers sent serverside apparently).

Edit:

Just noticed that you have the meta tag in place already but you have it in the wrong place. It must be the first tag after the title tag (or meta tags).
From MSDN:

“The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.”

[cei_Tim]

Thanks a lot paulob! That prevents the “compatibility view” icon from appearing and the page from breaking if it is manually turned on.

[Author]

Posts