Forcing Compatibility Mode in IE8 when users view your page
A few people pointed out that in my resent post MapCruncher and the Stubaitalbahn my demo page did not work in IE8 beta 2. It does work in IE8, but you need to use compatibility mode. However I have discovered that many new IE8 users have not discovered compatibility mode yet! As I have not yet had time to fix the page properly, I wanted to force the page to always use compatibility mode in IE8.
Luckily I went to an excellent presentation on IE8 (by Travis Leithead) at ReMix in Brighton recently and I learnt that all you needed to do is to add this tag to the html:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
You can of course see this action on my MapCruncher demo page
Thanks. Saved me hours of work.
Same here, thanks.
I tried this and It didn’t work (I still need to press the button anyway)
I even tried adding it to each page, any other solutions that you know of?
Perfect, just what I was looking for.
Cesar: did you put it inside “head” tags?
seems to work a treat. thank you very much!
ps. cesar, i’ve pasted this code into site templates under tag. has worked for all so far..
Cesar: I think you have to put it as the first thing in the head tag. It didn’t work for me when I had it after the css files.
Developers beware: this trick does not fully kick IE8 into IE7 compatibility mode. I work for a design firm in midtown Manhattan and was hoping this would solve the headaches of IE8 compatibility, but I’ve found that while selecting IE7 compatibility mode from the Tools menu works great, using this meta tag does not.
Specifically when dealing with the “png / black border fade” lightbox problem, setting the browser to compatibility mode manually works great – borders come out nicely faded. However when using this tag – even though IE8 will tell you it’s in compatibility mode, and even grays out the option of selecting compatibility mode, the nasty black borders persist.
Why Microsoft would include a “switch into IE7 mode” that doesn’t fully switch you into a mode you can click yourself is beyond me.
Thanks Aaron….still need to test to see if this works on some stuff but my issues have been with lightbox also. Let ya know…
Thx! This line of code save me hours of work and headaches!
[...] http://blog.timwarr.net/2008/09/29/forcing-compatibility-mode-in-ie8-when-users-view-you-page/ [...]
the fact that web developers have to add this tag to “unbreak” their site in IE8 just shows how messed up IE is. never have this problem with gecko- and webkit-based browsers.
thanks for the info, though – it was helpful in “unbreaking” my website in IE8 without spending time on tailoring the page to please IE.
Fantastic, really saved my @ss.
Cheers.
tnx ur a lifesaver! used it on my site!
nomatter how much credit i try to give ie, it sucks balls.
it honestly think Micro$oft/IE are trying to kill itself from the market.
Works great for me, thanks! I did need to put it right after the opening tag.
@Aaron have you tried sending the header directly by adding this to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
Just a quick note on this – great fix but I’ve found it does NOT work if you try and specifically add it to your page inside conditional comments so that only IE8 actually renders it. It only works if you put it into the page directly so that all browsers parse it.
If I’m wrong about this, then please correct me, but it certainly seems to be the case on the project I’m working on at present…
Hope this helps someone…
That bought me some time while I change this one inline onclick to a jquery doc-ready. Thanks! Stupid IE8 and Transitional doctype.
This was great! Thanks a bundle.
[...] Found it here [...]
The patch above did not make a difference. Compatability mode turned on did it.
This saved me a lot of time this week.
Thanks, worked for me.
worked for me, as mentioned like everyone else above it needs to be the FIRST THING IN THE HEAD TAG.
Notice: While this trick will render the Document Mode in “IE7 Standards” it leaves the Browser Mode in “IE8″ instead of making it “IE8 Compat View”. The issue this brings is with e-commerce websites and Google/PayPal Checkout. If your customer is logged into your e-commerce website and you offer a PayPal/Google Checkout method and they use it; they will be logged out of your website when they return from PayPal. This is an issue depending on how you work with those services (1) it could cause the order to be charged and NOT show in your e-commerce system; or (2) if you have the final review on your website the order will never finish.
The reason for this is due to “Express Setup” with IE8. That setup process checks a checkbox under Compatibility View Settings called “Include updated website lists from Microsoft”. If this is checked it will force websites to render in the Browser Mode “IE8 Compat View”; whereas the META tag solution DOES NOT. As a result, I have found that if your website does not render the “IE8 Compat View” mode and they goto a website that DOES; all authentication sessions and cookies are lost. For more information see my blog post: http://www.nathanhanna.com/2009/11/30/paypal-ie8-issue-demystified/
You are a legend. I have already wasted hours trying to figure out what was going on but found the problem then your answer in quick succession. Still going to move to CSS to properly fix the problem but over this hump. Keep up the good work:-)
If compatibility moad is not working with the above code, try:
just after your tag. This should force to IE7. Other forces available are as follows:
Hope this helps. (For browser coding issues be sure to place this at the top of your header).