DESIGN SERVICES

Graphic Design
Graphic Design

Multimedia Services
Flash & Multimedia
CD ROM Business Cards

Web Services
Web Design Services
Internet Marketing
Web Hosting
 eCommerce Solutions
Pictures on DVD or CDs

PC Repair Services
911 PC Repair

  Home

CUSTOMER SERVICE

LATEST OFFERS

Get More for Your Advertising Expense

The return on your advertising expense will shrink during bad economic times unless you take specific actions to prevent it. Look for ways to keep your sales volume growing without increasing your advertising expense. Read more

CD ROM Business Cards

Constantly look for new ways to expand your web site! We can help

web design Services

Preparing Your Website for Internet Explorer 8 (IE8)

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:

• when the page is an intranet site (for example, on your own corporate network and not on the Internet);

• when the page uses certain document type identifiers (a sort of invisible tag at the beginning of each web page) or fails to use one (or, in web jargon, the Compatibility View is triggered when the page uses a DOCTYPE that normally triggers the IE Quirks mode or when it fails to specify a DTD);

• and, on occasion, for some other unfathomable, undocumented reason, on pages that are validated as standards-compliant (or, at least, it does this in Release Candidate 1).

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 standards mode, use this tag instead:

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

   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.

   • How to Insert Meta Tags to Your Site in Dreamweaver

   • How to Add Meta Tags to Your Website Using Nvu or KompoZer

   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=EmulateIE8"

   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.

• Don't modify your website, and force IE8 to use the Compatibility View on your site. This is, at best, an interim solution, but is useful if you're too busy to fix the site in time for IE 8's arrival. You will eventually have to fix your site though, since the Compatibility View will probably be removed in later versions of IE. It's just a stop gap measure after all.

• If you previously used some fancy CSS hacks to workaround IE 6 and 7's bugs, you should put those hacks into separate style sheets specifically meant for those versions of IE only. You can do this using the method described in the article How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers).

  Once you have the IE 6 and 7 versions of your style sheets in separate files, you can go ahead to create a new standards-compliant style sheet meant for IE8 and the other browsers. With this method, the various versions of IE will only see the style sheet that is meant for them.

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").

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

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. For example, the "outset" and "inset" border styles mentioned in How to Create 3D Buttons Using CSS do not appear to be implemented in IE8 RC1. (Or at least, I can't seem to spot any difference in the borders using these styles and those using "solid" style.)

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.

THE LATEST

ADVERTISEMENT