Making IE8 Emulate IE7
As you probably know, Microsoft Internet Explorer 8 was "officially" released yesterday. If you were caught off guard by this and haven't had time to test your sites in IE8, don't lose sleep; you can make IE8 render pages like IE7 using a simple META tag.
The XHTML
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
It doesn't get much easier than that. Don't use this functionality as a crutch for too long though!
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
One of my favorite social APIs was the Open Graph API adopted by Facebook. Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...
One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.
One project I'm currently working on requires jQuery. The project also features a datepicker for requesting a visit to their location. jQuery UI's DatePicker plugin was the natural choice and it does a really nice job. One challenge I encountered was the...
Thanks for reminding me, all hell is going to break lose at my company because we are bound to a jvm based MLS system. Everytime there’s a new ie, the users download it only to find that it’s not compatible. Of course, ignoring the warning message that’s been on the front page for two months.
I’ll wait for IE8 portable (if there will be one) to test it and my web sites.
Wouldn’t is be lovey if something as simple as this could make every browser emulate Firefox.
A man can dream…
NICE David,
do you know if there is a good IE8 stand alone tool so i can run IE6, IE7 and IE8 at the same time? I have IE6 & IE7 stand alone already :-)
@Boris try http://www.my-debugbar.com/wiki/IETester/HomePage
Its handy
@Allen
thanks. I tried it and it did not do well in IE7 with CSS/JS dropdown menus while it works fine in regular IE7.
tztz no this doesnt make IE 8 to act as IE 7 in meter of fact IE 8 is the most broken “think” in the world. the Compatability Mode is NOT IE 7
it is some strange mode maybe better than IE 8 but worst than IE 7. For example many jquery UI plugins does’nt work. Some CSSs related to padding/spacing and etc.
So THIS META tag is just “computability mode checked/clicked” for IE8.
@JOKe I wouldn’t stand by this as a 100% identical emulation — sorry I didn’t make that clear.
For all of you developers scared of IE8, if there is one reason to upgrade it would be for the developer toolbar. Such an improvement from IE7’s developer toolbar, which I thought were pretty solid.
IE8 CRAP.
Use firefox, Stick to the standards
@xekhz: Well, we’re developing for users, not ourselves, so your comment does hold much water.
ie8 does suck, it can’t even render google.com correctly… once the world gets a hold, hello Chrome #1 browser… btw Firefox Rocks
IE 8 should be a MANDATORY update for all windows machines across the globe.
But MS seems to not give a flying f* for developers anyway.
@David Walsh -> Well, we’re developing for users,
If you are developing for users then stick to the standards otherwise you are developing for micro$
Very good but I think that web developers must first create websites that are standard-compilant not Internet Explorer compilant!
@xekhz: There’s a compromise in that, of course.
Actually, all the sites I did work well in IE8 without touching anything. I directly installed IE8 at my PC, I use the standalone browsers (IE6/7) provided by Xeno Code: http://www.xenocode.com/browsers/ – have a look :)
xekhz said: “Use firefox, Stick to the standards”…
Heh… Firefox/Camino has a veerrryy long way to be as standard-based as (for example) Safari* or Opera are standard-based.
Keep noticed: Spectacular “success”/popularity of Firefox is not making this browser a/the “standard”. I do not like (and do not use) Firefox (you may do not like other browser(s))…
I don’t care for websites dentured to work with internet exploiter (and their webmasters and users). I don’t care for ie (producers/fans/users etc.).
If your site works in Safari/Opera/Chrome (one of them used by your choice) than it will work OK also in other browsers (but not** in ie, only). Without needs to make tests in every browser. Have a nice day.
____
*) this one for Macs/iPhone only.
**) However you can add – if you feel “wanted by ms” – a denture, like IE8.js: http://code.google.com/p/ie7-js/
@xekhz:
As stated here, 43% of users still use IE6, IE7, and IE8. That’s hardly a demographic to ignore. I wish our (development) world was merry as you seem to think it is…
@Boris Check this from Microsoft:
http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx
I haven’t had time to test, but do you know if this triggers the same mode as if the user were to click the compatibility view button themselves?
Nevermind, I see that someone mentioned this already. Somehow I failed to see that when I search the page.
This will be really interesting.. I will try this. Haven’t seen or tested IE8 but I’m sure they’ve made some improvements and many f* ups along the way.
Excellent and useful post. Just a minor addition to it – the meta tag will apply only if it is added above any linked files (link, script) in the head of the webpage.
I tried IE8 for several days and I was miserable. I removed it and went back to IE7. I usually like new stuff ( I really like Firefox) but IE8 was not user friendly, at least not to me!
The more functional YET customizable Any browser becomes, the more glorious is it will be.
If you are developing websites and want a great graphical preview of what the site looks like in different browsers I suggest you download the free beta application of Expression Web 3 Super Preview..
Super Preview lets you see rendering out as they appear in different browsers and let’s you correct problems in WYSIWYG mode..
The link for info and download is below..
http://expression.microsoft.com/en-us/dd565874.aspx
The javascript debugger and this new product will also make you like IE 8 a whole lot more.. Especially if you design web pages for different browsers..
Safe my life !
Thank’s [ ].
Thanks for the tip Dave, I needed it for an older project I did. You saved me a lot of embarrassment.
Wow, very cool and helpful. Thanks Dave!
Awesome trick!!!!
Thank you very much
THANK YOU! … you just saved me about 3 hours and a huge headache.
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 mehtods. For example, 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/
This is how I solved this problem.
There is one elegant way to run IE6, IE7 and IE8 on the same machine, called virtual PC.
First download virtual PC from Microsoft website
Then download 3 EXE files with IE6, IE7 and IE8
Install them on your PC and test your web applications. Saved me days of looking for similar solutions.
If you’re in a time crunch and need to get your site published and into production, then by all means use this tag.
But if you have some spare time and really know your HTML code and CSS, then ignore this tag completely. My IE8 issue was not because of CSS but because of extra HTML code that was generated by ASP.NET page.
@James: If you want to test your websites you might use IETester (http://www.my-debugbar.com/wiki/IETester/HomePage). to be sure that your site is supported by all Internet Explorer versions
I understand the code you listed. I’m not that advanced, so I don’t know where to put it :)
@Pat Sullivan:
No you don´t have to put anything. you have to download the software that is posted in that page. http://www.my-debugbar.com/ietester/install-ietester-v0.4.4.exe
The you have to run your website into it.
This program help you to test your site in all problematic version of internet Explorer
Use ie collections folks : http://www.brothersoft.com/internet-explorer-collection-172444.html <– You'll be getting all the ie that exist (from ie1 to ie9-preview)
@Kalel:
I´ll give that a try
works perfectly
great topic,
thx
Are there any other notable downsides to using this fix?
@muxed I’ve been using this for a long time with no side effects. Its the easiest to use. THEN combined with conditional statements you can have a ie7 only .css file that contains only the changes needed from main stylesheet to fix IE7 issues (which will then work in IE8 which otherwise would be different again and require ANOTHER IE stylseheet!).
Note: this code must go before the stylesheet.
Hi,
That is a very neat trick. Also another option is to use the IE7 view in the IE8’s developer tools, although I’ve heard this is not always 100%. The IE collection tool is also not accurate – I’ve had numerous problems, especially with IE6 not rendering the same when it is part of the IE collection.
The tool we currently use is Multi-Browser Viewer – http://www.MultiBrowserViewer.com – it is a little more pricey but has virtualized standalone versions of IE6, IE7, IE8 and IE9 as well as most of the other web browsers. Plus it also does screenshots.
You are a star David !
Thanks for sharing this! This saved me a lot of headache. Well, even in 2011 we have to test for IE7… :P
Can this also be used for IE 9?
Just throwing this out there
Place this in your header
This will get rid of the IE defaults and make the browser a bit more friendly to code for.
OK one more time wrap the following with a less than greater than since I cant seem to post it here with them
meta http-equiv=”msthemecompatible” content=”no” /