|
Tuesday, May 12, 2009
CSS Compatibility Mode Fix for Internet Explorer 8
 My recent post about IE8 has launched it’s ugly head.
A client of ours contacted us to let us know after they downloaded the new Internet Explorer 8 there site looked messed up.
Knowing this was going to be a problem, Microsoft created a button called ‘Compatibility View‘ so users could view websites in the older version of their browser.
But this was not a work around for our client.
Instead of fixing (or hacking) all the code on the website I added the following code recommended by Microsoft:
<html>
<head>
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<title>My Web Page</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
It worked!
This is truly a work around – a Microsoft work around. Microsoft knew full well that their new browser couldn’t view perfectly good standard coded websites, so they had to come up with a way to view websites as if you were using their old browser.
What a joke. It’s no wonder why Microsoft is losing market share to Firefox and Apple.
Posted by: Michael Swartz at 6:23 pm
Comments: 35 Comments | Filed under: HTML, Web Design
|
Ya baby!! You are the man! I’m having the same issue with my clients site and you solved my problem with a 2 second google search.
Thank you!!
Excellent!
Glad to hear the code helped you out. I knew others would have the same issue.
Thanks for letting me know you found my post via a Google search. I titled my post hoping people would find it easily. I initially had to do some deep searching on MSDN to find this fix.
website looks bad in ie7 and other browser but look ok in ie6 so help me out…
Hi Sourabh. Your website looks fine in IE7 over here.
Thanks for writing this article Michael, I’d had the same problem on my site, although visibly it looked fine in IE8.
It’s a shame that Microsoft insist on new technologies that make everyone else look bad.
After browsing around I found facebook were using the same work around.
Hi Cole.
You’re welcome. I’m glad you found the article helpful. I knew there would be others who would need this information. Amazing how Microsoft buried this ‘hack’.
Interesting about Facebook.
Thanks for you comments.
Had the same problem on my site. After a few unsucessful attempts to fix the problem, I googled the fix and came across this article. The fix works great. Thanks
Thanks! This way I have solved a GoogleMaps Pedometer problem at Camburi.tv
Hi David and Markus.
You’re welcome. I’m glad to hear this corrected your issues.
Okay… this doesnt seem to work for me… not quite sure why… I added the code and all it did was take away the compatability icon away at the top of the page, but it still looks the same… It looks great on all other major browsers (Firefox, Safari, Chrome, and Opera )… However when I hit the compatability view icon it works perfectly… why the difference in behavior
Hi Chris.
Not sure why it’s not working for you. I know it takes away the compatibility icon, but it should also emulate IE7. Please list your URL and maybe I can take a look at it.
Thanks – saved me a bunch of time. Too bad microsoft can’t is so fouled up that this stuff has to happen
Thanks a lot!!!! I’ve been struggling with this all day.. this worked awesome.. I can go to sleep now…
Thanks again!
Thanks for the foot work Michael. I wish Microsoft would get it together with their browser. I personally stopped using IE a long time ago, however when developing websites you have to develop for the masses. The masses still use IE.
I my god. What a post. You are so wrong about this part:
“Microsoft knew full well that their new browser couldn’t view perfectly good standard coded websites”
Internet Explorer 8 is much better with good standard coded websites. You’re code is just s*** and not standard at all. My sites works perfectly in IE8 with good standard codes, only ie7 and ie6 needed some fixes.
Chris. I was talking about IE7, not IE8. I agree IE8 is better, but Microsoft built IE8 with compatibility mode because they knew websites would look and act differently.
Actually you’ve developed your site for IE7, using some of the non-compatible css features. IE8 doesn’t support all of IE7′s non-compatible features.
Hey Michael!!! thank you so much for informing us all!! this really helped me as I was checking my website in all popular browsers and noticed explorer was displaying my content differently but in compatibility mode it was great! thank you for the code! it took me 1min at the most to find your post! =D thanks!!
This seems to be a great fix for most but it doesn’t work for forum posts. On my forum, whenever I (and some members) try to write a long post, the screen bounces back up and it’s impossible to see what you’re typing
i am a firefox user more than an internet explorer user but it seems that Internet explorer 8 is very stable and it its loading time for webpages is faster too.
Michael, great tip – thanks for sharing.
This definitely works better than IE8 Compatibility mode when testing IE7 specific css hacks (e.g. html>body).
Thanks, worked a treat.
@Adrian @Nick You’re very welcome. I’m glad to hear the solution helped.
You are the man Michael, you have solved my problem. Thanks very much.
Ok it has been a while since you posted this.
I seem to be having severe problems with IE8 and compatibility mode. I have tried all of the meta tags available and still no hope of solving the problem.
The last thing that I did was set the X-UA-Compatible to IE=8;FF=3;OtherUA=4
so far that has been the best, but I have a .NET UpdatePanel and some buttons that trigger AsyncPostBacks that cause my CSS to go all goofy at random.
Is there a way to force the browser to no use the compatibility mode button?
@Robbye I’m not sure. You may want to do a search on Google for ‘compatibility mode remove’
I know this post is reaching almost 2 yrs old, but it help me out drastically. Worked for nearly a day on the CSS file due to the IE rendering and the meta tag that you have posted did the trick. I just finished looking at a MS blog (before clicking onto your page) and it didn’t lay the meta tag out very clearly like you did.
Thank you so much.
You’re very welcome Bryan and thank you for visiting.
Thanks for sharing. Nice piece of information!!!
Thank you for this. It saved me today. However, expanding on this, according to the MS site, you can set the code to call the latest version of IE by changing the code to:
Notice the word ‘edge’. That makes the code call the latest and greatest version of IE you have on hand.
I do have another question, though: does that meta code snippet completely replace a standards compliant one like:
If it does, it will seem to corrupt the benefits of the second one. Also, it seems that the code shuts down the use of compatibility mode in the browser. Sometimes it comes back on its own on the next site visited, sometimes not.
Not a perfect system.
I noticed your system filtered out my code.
Just replace the IE=EmulateIE7 part with the word edge.
Sorry, again: just replace the EmulateIE7 part with edge. What a morning.
thanks michael, it saved lots of hard work..
Thanks for this.This will help us lot.
I haven’t tried it yet. One problem Ive encounter in css/ie is the nth-child thing.. hope this is really a workaround for this..