How to Force Internet Explorer 7,8,9 into Broswer Compatibility Mode for visitors, Linux
Here is a tech tip to help anyone having Browser Compatibility issues in Internet Explorer 7, 8, or 9.
This will be useful for anyone on a Linux webhost, including those with a WordPress installation (I don’t believe this technique below will work in a Microsoft hosted environment).
Internet Explorer still has a large Internet Browser market share – even with so many competition browsers available these days, such as Firefox, Safari, Opera, Chrome – and this list goes on.
In my opinion you should make sure you have total browser compatibility for at least these browsers: Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome. This means checking your site on each of these browsers to ensure the page layout looks correct and therefore not hindering any user experience.
Now the problem I was having is the Footer of my website was not displaying correctly in Internet Explorer 7, 8 or 9. Basically all the 4 widgets in the Footer were jumbled all over the place and looked pretty unattractive.
Firstly, excuse all the pictures of me in this post! 🙂
Now here is a screenshot of the issue I was experiencing:
As you can see the Footer widgets are all out of line and instead of sifting through the code (for possibly hours) trying to adjust footer spacing and alignment of widgets, I have come up with the following solution.
1. Insert the following code into the section of your website (as close to the top as possible).
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″>
If you are using WordPress a simple way to do this is to download the Custom Headers and Footers Plugin and insert the above code snippet into the Meta Headers field.
2. Open up the .htaccess file in the root of your webhosting account (or if you don’t have a .htaccess file create one with notepad).
Insert the following code into the .htaccess file and save:
Header set X-UA-Compatible IE=EmulateIE7
Now if someone with Internet Explorer 7, 8 or 9 visits your site their browser will read this tag and set the browser to act in Internet Explorer Compatibility Mode, without your website visitor having to do a thing!
Here is now a screenshot of what happened after I installed this code snippet:
Everything looks inline and proper. This tip should work with any issues on any part of your site when being viewed in Internet Explorer.
If you want to check this does indeed fix any issues before going through the above steps – simply click the Compatability View button in Internet Explorer: and if this fixes any problems, then you can simply unclick this button again (taking the browser out of campatability mode), then you can make the above code changes and when you check the site again all should be looking proper, and you can rest easy knowing your website visitors will be having ‘campatable’ experience on your site!
I hope you find this tip useful and if you have any comments, suggestions or alternative solutions please do let us know.