Internet Explorer 8 issues with Compatibility View & EmulateIE7...

Categories: HTML/ColdFusion

So, Internet Explorer 8 was just officially released. First off, I was really impressed with the download speeds. In the past downloading Day 0 releases from Microsoft have always been a bit problematic for me—because of the sheer volume of download requests. However, my download experience was very fast. Kudos Microsoft.

However, one of my main gripes from RC1 is still present—Compatibility view doesn't work consistently. If you're not aware, the following meta tag is supposed to force IE8 to run in Compatibility view:

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

However, I'm still noticing issues that are inconsistent between adding this to the HTML and a user manually activating Compatibility View for a site.

The quickest way for me to illustrate this is to show you some screenshots.

In our application, we have a table that has collapsible rows. This is what the table looks like in every browser but IE8:

imageIf you click on the image icon, the row expands. This functionality has been working fine in Firefox, IE, Chrome, Safari in every major version.

Now, if you look at the grid in IE8 it looks like this:

imageIt may not be immediately obvious as to the problem, but the root cause is how IE8 is handling the rowspan attribute of a table cell. In IE8 it's ignoring rows that aren't visible—therefore causing a corruption to the display. So the behavior in IE8 is quite a bit different.

So, let's see what happens if I turn on Compatibility view for this site (click on the image icon next to the address bar, or go to Tools > Compatibility View.) Now the table appears as I'd expect:

image

So great, IE8 can render the grid like we want—as long as the user turns on Compatibility View manually. But what users are going to think to do that? Probably none, but the most power users.

Fortunately, the IE team thought of this in advanced and implemented the X-UA-Compatible meta tag to give us a way to force a page to Compatibility View. So, now lets turn of Compatibility View and try forcing the mode by adding this meta tag to our code:

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

So, if everything works at you'd expect we should see everything render exactly as it did above. However, we get something quite different:

image

If you're wondering where the other rows went, look at the scrollbars on the side. What happens is instead of rendering each row the height that you'd expect, IE8 is rendering the height of each row the height of all the collapsed rows.

So, something is definitely amiss. I'm not sure what the difference is internal between using the meta tag and physically enabling Compatibility View for a site, but it's obvious from this example that they are not exactly the same.

I'm not sure what other issues might turn up from this, but it's important to keep in mind that the meta tag is not quite the fix that Microsoft promised.

So, if you're relying on the meta tag to resolve issues into you can fully test and fix issues on your site, just be aware that it might not be working as well as you'd like.

PS – I did test using <meta http-equiv="X-UA-Compatible" content="IE=7" /> as well, but that made no noticeable difference.

Comments

NICCAI's Gravatar Do you have any feel yet for whether compatibility view is a good substitution for testing in IE7?
Dan G. Switzer, II's Gravatar @Niccai:

I don't think that it will ever be a substitute for testing in IE7. It's not like it's actually using IE7's rendering engine--it's just attempting to emulate behavior. Here's a link that lists some differences between IE8 Compatibility View and IE7:

http://blogs.msdn.com/ie/archive/2009/03/12/site-c...

Perhaps you might be able to get away with looking at a site in development in Compatibility View to ensure you're on the right track, but I suspect you'll always need to verify things in a full blown IE7 browser.
Spinner's Gravatar The problem here is that Microsoft actually gives us up to 3 new browsers to handle, with just IE8. IE8, IE8 Compatibility View and IE8 in IE7 emulation mode (which isn't the same as the Compatibility View, as the article-writer has proven). His point above is just ONE example where there is a difference between the "emulated" mode and the "compatibility view".
I have found several more which proves there is a difference.

I am so tempted at redirecting all my IE-users to firefox.com or something like that...
Justin Carter's Gravatar Dan, have you tried using the HTTP Header on your webserver configuration instead of the meta tag? Maybe you will have better luck with it (or maybe not!)...

X-UA-Compatible: IE=EmulateIE7
Dan G. Switzer, II's Gravatar @Justin:

I was able to resolve the issue via my JS code. The main point I wanted to warn people of is that there are differences.
Practicality's Gravatar I have run into the same issue and moving the meta tag before the head of the document fixed the problem. It's possible that this meta tag does not work after any sort of rendering has occurred, so if you load any js code or set the document title, you can no longer apply the meta tag.
Umer's Gravatar Sorry to microsoft they are doing shits.
Site developed in IE8 Normal mode does not work on Netscape or other Exploeres.
Also turning on the mode does have effects but not 100% correct
MicroSucks's Gravatar Microsoft sucks!! Redirect them to firefox.com!! :P
IE8 should be banned forever!!!
Fed up's Gravatar Seriously, Microsoft has had a billion chances to get their browser right but always fail miserably. Instead, they just make our lives more difficult than it has to be. Put me down for the redirection to http://www.mozilla.com.
gregg's Gravatar Compatibility view does not work with all websites. Sometimes I click on an internal icon within a website and all I get is a blank white page with a small round circle going round and round and round and round. This never happened until I downladed IE 8.
vitthal's Gravatar I am using IE 8 for my project but its showing me randomly an error session expired and diverts me to the session expired page of my project.
While i have kept Session timeout=500 in web.config and in IIS to.
On IE 7 it works fine.My web is ajax enabled.
What should i do to avoid this problem.
Please help me to avoid this problem.
Dan G. Switzer, II's Gravatar @Vitthal:

I'd recommend asking for help on a forum dedicated to your server platform--the odds are your exact issue has come up before. I can only see IE8 timing out a session if your session management is cookie-based and the cookie is expiring for some reason. If you're passing session tokens along w/each request than there shouldn't be any problem.
vitthal's Gravatar No my session management is not cookie base.
Christopher Moore's Gravatar Please can anyone help with this?

The Issue - Lost IE 8 connectivity after removing Norton 360 A/virus software

I have connectivity to my LAN and can ping websites from the command line and receive confirmation ok but since reboot after Norton 360 was removed it cannot display any webpages using IE 8.

Workstation is running Vista on a home network. All other workstations have internet connection and the workstation that has this issue is ok with email, Windows Live messenger, anything that does not use IE 8.

I am as green as grass in this area so any help that could be provided would be greatly appreciated.

Thanks and regards,

Christopher Moore
De Winton, Canada
Christopher Moore's Gravatar IE Explorer 8 gets a script error:
An Error has occurred in the script on this page.
Line:  15
Char:   2
Error: Object does not support this property or method
Code:  0
URL:   file:///C:/Program%20Files/Microsoft%
      20Office/Office12/INTLBAND.HTM

No other action from here results in success.

Any options / suggestions gladly welcomed.

Thanks,

Christopher Moore
De Winton, Canada
Stu's Gravatar Perhaps you're all missing the boat. Microsoft is moving in a direction which makes it very difficult to field sophisticated sites unless they're written in .Net. This is not incompetence, screwing up or a Microsoft failing. It is a very well thought out and reasoned marketing decision. If they can't make money off IE, why keep producing it. If they can develop a synergy that tightly ties IE to .Net as well as keep a majority market share, eventually they will make the appropriate moves to force other browsers out of the market.

Microsoft is out to win. If you bemoan the fact that Microsoft does not "support" the web community or seem to want to make programmers' lives easier you're not really facing reality. Microsoft is a profit oriented company, they've done very well, and making your life easier has no place in their profitability.
James Menendez's Gravatar Thank you soo much. You saved the day!!!
Jeff Roth's Gravatar I think there may actually be 4 modes, not just 3.

I have a menu problem one my sites in IE 8 mode. Turning on compatibility mode fixes the issue but if I add an emulation meta tag to my document, I only get the fix sometimes.

If the browser was in normal mode prior to loading this page (both through refresh and links) then the menus continue not to work. If the browser was in compatibility mode before loading the page then the menus do work.

So its clear there the browser still has the compatibility mode state on or off even though the button is removed..

So for IE8 there's Normal, IE7 Compatible, Normal+IE7 Emulation, and IE7 Compatible+IE7 Emulation.
Carl's Gravatar I can't get the bloody thing to turn off!
UI've un-checked it (and check that every morning, any more), but it keeps coming up, and turning itself back on, and interrupting my browser.
Is there a way to completely eliminate this piece of garbage?
Harpreet Bhatia's Gravatar Thank you it worked like charm. But still i"m using multiple $('#id').fadeIn()
but only one runs. Actually, working with forms, i need to show or hide fields depending on user choice. Example if there are two such questions, IE8runs only a first one, Whereas FFruns fine.
Tom Rowley's Gravatar Again, when I had problems using the metatag, I solved these by adding the metatag before the head tag.
Julie's Gravatar Is there code I can put in a website that I can DISABLE compatibility view in stead of emulating? I'm helping set up this temprary site: http://commonbostontest.org, and when compatibility view is on, it screws up all the formatting, and I know many IE browsers are defaulted to display in compatibility view, which is what we don't want. Keep in mind, I'm not a fully skilled web coder.
Dan G. Switzer, II's Gravatar @Julie:

You can use:

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

To force compatibility mode to IE8 (which essentially turns it off for your site.) It basic tells IE to render the site like it's IE8.
Diana Cook's Gravatar Facebook games,
When I try to play Farmville and other games on Facebook I keep getting a Debug and Close message within seconds of intering the game The game reloads but the message comes back. How can I get past this and play the games?
Win's Gravatar Hi anybody can help me with this internet script error:
"file:///C:/Program%20Files/Microsoft%20Office/OFFICE11/INTLBAND.HTM"

Can anyone advise me on how to get rid of this in a step by step process? I am getting this everytime I use the internet. I was not sure if I downloaded IE8 but if I did, can I remove or uninstall this so far? I was not having this problem but probably started in a month or two.

Your input is appreciated please email me for any help at wsimpoo@hotmail.com. Thank you so much.

Win
jewel ahmed's Gravatar In compatibility view I am unable to write on form fields like textbox, textarea etc
So I can not make the site live!

Can anyone help me or hints please!

thanks in advance
Amit's Gravatar Thanks master, <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> worked great for me.

Long live
Mike Turner's Gravatar I use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> as well.
RAJU's Gravatar My application in vs.net2003 is working fine but after installing IE8 .. i getting error of Type mismatch prorbly where Html releted classes are used.
israr's Gravatar Still facing issue for IE7 & IE8 but application is working fine on Firefox & Google chrome
KareLo's Gravatar Hey, out there:
If you are using Windows XP, DON'T upgrade the Internet Explorer 7 to the version 8! If you are there, already, you'll - sooner or later - experience trouble. The IE8 is automatically sneak upgraded, with whistles and bells and tollbar addons, until the stage that i starts to cause problems. And - if you are already trapped in IE8 - GET BACK TO IE7!!!
And - yes - it is possible, contrary to to what "experts" say:

First - go to Microsoft download center and download IE7 for XP (http://www.microsoft.com/download/en/search.aspx?q...). Then uninstall IE8: Start Explorer and go to 'Windows/ie8/uninst' and start 'uninst.exe'. You'll then be informed about programs which may be negatively influenced by the deinstallation. These may, if necessary, be updated later. Run the IE8 uninstallation. When it is finished, restart Windows. Chances are, that the old IE7-installation automatically takes over, but in any case: Now run the downloaded IE7 installation program, which will clean up the IExplorer environment and leave you with clean and troublefree Internet sessions...!
You should, however run one or more registry cleaners, before settling down and relaxing from your previous problems. Eusing Free Registry Cleaner, RegCure, RegistryEasy, and AVS Registry Cleaner, are good choices.. For malware scanners, I'd recommend AVG, Spybot Search and Destroy, Super ASW Pro, CCleaner and Malwarebytes' Anti-Malware.
And a final "warning": When upgrading Windows, stay away from upgrades pertinent to IE8 or, otherwise, you'll, again, ending up being engulfed in IE8 trouble..
By the way, if you are looking for complete disk or partition image solutions (greatly recommended..!), then Ghost version 2003 run from DOS (floppy or CD) is a recommended solution.

Regards

KareLo
George's Gravatar My site works fine with Compatibility view OFF. When it gets turned on that is when the website doesn't' work. I have no problems with any browser except Explorer.

Why can't Microsoft build a browser that actually works without making the user make viewing changes that don't work from one web page to the next.
Stewart Finley's Gravatar Error message not understood!! How to fix??
Anit Garg's Gravatar I am having a web application developed in ASP.Net
In this application i am using .net menu control and java script based calender, when i am using this meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

then menu is working but calender does not work and while i remove it then menu does not work and calender works.
Please solve this problem.........
Sonia Fox's Gravatar Thanks for putting this together ever since Internet Explorer 8 was release already- this is a great article for those of us with our heads buried in the keyboard all day.
cLo's Gravatar My site has the same issue. Text boxes disappear when the compatibility view setting is turned on. My site was developed in cakePHP by others who won't support me anymore. Which file do I add the meta tag that would affect the entire site?
Rob Holtham's Gravatar Was trying to find information regarding IE8 and IE9 behaving differently when being forced to compatibility mode with IE=EmulateIE7 compared to manually selecting compatibility view and came across your blog. After working out what my issue was I thought it might be helpfull to others to post the detail.
When the browser is forced to compatibility mode with IE=EmulateIE7 it still reports it's actual version in the response header User-Agent (for my test it was MSIE 8.0) but when you manually turn on compatibility mode the response header is MSIE 7.0 Some webservers - in my case a SAP NetWeaver Portal - respond differently depending on the reported browser version.
To fix the problem I implemented a policy to add IE=EmulateIE7 to the header but then manipulated the response to capture any User-Agent response containing MSIE and replace it with an appropriate MSIE 7.0 string.
Gary Wilson's Gravatar Hi Rob,
>"To fix the problem I implemented a policy to add IE=EmulateIE7 to the header but then manipulated the response to capture any User-Agent response containing MSIE and replace it with an appropriate MSIE 7.0 string. "

We are having the same problem.Could you please explain how to modify User-Agent in response header to MSIE 7.0 ?

Add Comment

Leave this field empty


If you subscribe, any new posts to this thread will be sent to your email address.