Preparing Your Website for Internet Explorer 8

Make your website compatible with IE8


Preparing Your Website for Internet Explorer 8 (IE8)

by Christopher Heng, thesitewizard.com
Date written: 28 January 2009

At the time I write this, Microsoft has just released Internet Explorer 8 Release Candidate 1 (RC1), the version that is supposed to go some way in helping the outdated software catch up with the other web browsers around. This article discusses some of the things that you need to do to prepare your website so that it works well with Internet Explorer (IE) 8 without the need for user-intervention.

For those not familiar with the terminology, release candidates, in Microsoft parlance, are versions of software that are still not ready for the general public to use, since they may not have all the major bugs ironed out. They are generally more or less complete (or at least, they are more complete than the "beta" releases, which are work-in-progress software), so they are made available so that others can test it. In the case of IE 8 RC 1, Microsoft has said that all the features intended for IE8 have been implemented, and the real release version of IE 8 should behave the same way. This allows web developers to try IE 8 on their websites and adjust them so that they work properly when IE8 is finally released.

Where to Get the Browser

IE 8 can be downloaded directly from Microsoft's IE8 site. Note that if you're using the beta of Windows 7 or Windows 7 itself (depending on when you read this article), you will not need to install IE8, since Windows 7 already comes built-in with IE8.

For those who don't want to install unreleased software on their computers, you may prefer to install it in a virtual machine like one of those listed on the Free x86 / PC Emulators and Virtual Machines page. That way, you won't mess up your main system with a possibly buggy browser (it's after all only a "release candidate" at the time I write this). This method will also allow you to continue using your current version of IE on your main machine, while testing your site with IE 8 in the virtual machine. For those not familiar with this concept, you may want to read the article How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking) for more information.

Implications of the Improved Cascading Style Sheets (CSS) Standards Support

As far as web browsers go, Internet Explorer has been historically regarded as the bastion of buggy and incomplete CSS support. Even at the date of its release, IE 7 was already many years obsolete. With IE 8, the browser has supposedly improved its Cascading Style Sheets (CSS) support to add more CSS 2 support, although in my testing of RC1, the implementation of CSS 2 still does not seem complete.

(For those who are not sure what CSS is, it's basically the part of a web page/site that controls its appearance [such as its colours, the fonts used, how the page is laid out, etc]. A number following "CSS", like "CSS 2", indicate the level of support for certain features in the standard.)

Along with improved CSS support is of course the problem that it will break some existing websites. Since IE 6 and 7 has existed for so many years, many new webmasters have been brought up to think that the way IE rendered a site was the correct way, and have thus coded their sites accordingly. This may cause the site to look ugly in more standards compliant browsers like Firefox, Opera, Safari, Chrome and the new IE 8.

Even if you have not deliberately designed your site only for IE 6 or 7, it may still be affected if your site was built with an old not-standards-compliant WYSIWYG (What-You-See-Is-What-You-Get) web editor or site builder, or created using a website template that you bought or got from someone.

Having said that, sites that comply with the web standards should still be checked with the new browser, in case they use aspects of CSS that are implementation-dependent or are unimplemented/buggy in IE8. Basically, tedious as it may be, there's just no short cut to manually testing your site in a browser, especially a major one like IE.

Implications of the Compatibility View

To help existing websites incompatible with the standards, IE 8 introduces something known as the "Compatibility View". When invoked, IE8 will display a web page the way IE7 does, that is, it will act as though it were IE 7, bugs and all, when rendering a web page. (Or so the theory goes.)

At this time, IE8 automatically shows a web page under Compatibility View under the following circumstances:

If your website falls under one of the above categories, IE 8 will render the page in its IE7 mode. It may also pop up a tooltip with the words "A problem displaying [domain name] caused Internet Explorer to refresh the webpage using Compatibility View" to let the user know what it's doing (where "[domain name]" is your domain name).

Your page will also be displayed in Compatibility View if it's listed in Microsoft's master list of IE8-incompatible sites, or if the user manually invokes the Compatibility View on your site.

Forcing a Particular Rendering Mode on IE8

If you know for certain that your web page should be rendered either in standards mode or using the Compatibility View, it is possible to indicate to IE8 that it should render it from the start that way. This is useful not only to make your website appear as you want it, but it also avoids the embarrassing tooltip from IE8 about problems with the web page.

There are two ways of doing this.

  1. Using a META tag to enable or disable the IE8 Compatibility View

    One way to force a particular mode is to insert a special META tag into every web page on your site.

    To make IE8 to render in Compatibility View, use the following tag:

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

    To cause IE8 to render a page in the latest supported version of the standards, use this tag instead:

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

    Note that the tag should be inserted into the HEAD section of your web page, and not in the main (user-visible) web page itself. If you're not sure how to do this, please see one of the following tutorials for how to insert META tags.

    Although the tutorials do not mention the IE8 compatibility tags, the same procedure used to insert the other META tags should be used to insert these tags. If you are interested to know more about Meta tags, see the article "How to Use Meta Tags In Search Engine Promotion" and its follow-up "Why Don't You Use the Keywords Meta Tag on Your Website?".

  2. Setting a Custom HTTP Header for the Apache Web Server

    Setting a META tag in your web page is well and fine if you use some sort of tool (like Dreamweaver's Template Tool) to automatically insert the tag into all the pages of your site. However, if you don't use such a tool and you have many web pages, adding a new tag can be a great hassle.

    One way to avoid this is to get your web server to automatically send a special message, called "HTTP header", to IE8 when it serves any page on your website. This header will cause IE8 to render your whole site in the mode you prefer.

    For the following method to work, your website should be hosted on an Apache web server, and your web host must allow you to override the server configuration file using a ".htaccess" file. This probably applies to most people hosted on a commercial web host, although you should check with your web host to see if it's true.

    If you want to enable the IE7 Compatibility View for your website, add the following to your .htaccess file:

    Header set X-UA-Compatible "IE=EmulateIE7"

    Use the following line instead, if you wish to have your site rendered in IE8's standards mode.

    Header set X-UA-Compatible "IE=edge"

    If you don't have an existing .htaccess file at the top level folder of your website, you can create one using an ASCII text editor like Notepad, and upload it to your site using an FTP client.

    Note that making mistakes in your .htaccess file can disable your entire website, so if you're not sure what you're doing, or find this section difficult to understand, either use the META tag method or get the help of your web host.

Making Your Website Work in Multiple IE Versions

Of course, doing the above isn't enough, since we aren't just dealing with IE8 in a vacuum. For at least some time until IE 6 and 7 dies out, we will still want our sites to be displayed correctly in IE 6 and 7 as well.

To do this, you have at least the following options.

Browser Sniffing

Some websites deliver a different version of the web page to different browsers (or different versions of the same browser). This is usually done at either at the web server level through scripts (programs) that run on the server itself, or on the web page level, through JavaScripts inserted into the web page. The practice is known as "browser sniffing".

Even if you do not know what browser sniffing is, this section may still apply to you. If you have inserted some sort of pop-up menu script that you obtained from a third-party website, your site may inadvertently contain browser-sniffing facilities. Some menu scripts incorporate browser sniffing to work around differences among the various browsers. Get an updated version of the third-party script that supports IE8 if your site uses such facilities. (Before you ask, don't worry if you're using the menu generated by the CSS Navigation Menu Bar Button Wizard. The menu generated is purely CSS based, and contains no browser sniffing.)

For those who have written their own scripts, you may need to update it to recognize IE 8. That is, you will need to add the IE8 user-agent string to your various tests.

If Compatibility View is enabled, IE uses the following string. Note that the "Windows NT 6.0" portion below is for Vista. The version number "6.0" will obviously be different if the visitor is using Windows XP ("5.1") or Windows 7 ("6.1").

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0)

In standards compliant mode, IE 8 identifies itself as follows:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)

In a nutshell, scan for "MSIE 8.0" if you need to identify IE running in standards view. If you just need to detect IE 8.0, whether it's running in standards mode or Compatibility View, search for the string "Trident/4.0".

Caveats

Although IE8 is more standards-compliant than all its previous versions, its standards support is still not complete.

As a result, you probably should not just assume that the same style sheet that you use for Opera and Firefox will work identically for IE8. If your use of CSS is simple, or you don't mind a slightly degraded experience for your visitors in IE8, you can just ignore the differences (if any) and use one stylesheet for IE8 and the other browsers. Alternatively, if your styles are complicated, you may need to create yet another style sheet just for IE 8 that incorporate workarounds for the unsupported aspects of CSS 2, 2.1 and 3. Or use the lowest common denominator among the browsers.

Conclusion

With the release of IE8 just round the corner, it's a good idea to get your copy of the browser now, so that you can prepare and test your site so that it will render correctly under Internet Explorer 8.

Copyright © 2009-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Preparing Your Website for Internet Explorer 8 (IE8)





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.