Using multiple browsers for website compatibility testing

If you are building websites that go beyond personal pages, you will want to ensure that they can be viewed by as many internet users as possible. Sites that dont display correctly in a users browser will probably be closed, never to be visited again.

All web browsers, more or less, will display HTML code according to guidelines set by the W3c.

Some browsers do a better job then others. Its up to web developers to make sure their new, shiny website will display correctly, and can be used by as many internet users as possible.

Some browsers have introduced their own proprietary elements to HTML / CSS, some of which have been w3c approved, others which have not.
Its probably a good idea to avoid using proprietary elements (such as IE's blendtrans) that have not been w3c approved, unless you take into account how they will display on browsers not supporting such elements.

Many developers think that testing a site in the latest version of a browser (like IE8, or Firefox 3, at the time of writing) will automatically ensure the site works perfectly in older versions of the browser.
This is sadly not the case, particularly across Internet Explorer versions.

To a much lesser extent, testing sites in the most common versions of Firefox is also a good idea.

While its often perfectly acceptable for there to be some minor display differences across browsers, some websites may looks fine on one browser yet be completely broken on another. This is unacceptable for any professional company as they will potentially lose sales.

Any developer, even one who doesn't care about cross browser compatibility, would be very unlikely to write an entire website without testing it in a browser.
The only difference between the normal "test in one browser as you build" strategy is that instead of just testing in IE, or Firefox, or Safari, the developer tests the page in several browsers at once.

This may take slightly longer to do, but it does get around the nasty problem of writing an entire site that works in one browser, only for it to be completely broken in another. Fixing problems like that can be very frustrating - fixing one problem leads to another, and so on.
Far easier just to fix tiny faults as they arise.

So, which web browsers do we test in, and how do we install more then one version of the same browser?
Firstly, lets take a look at what web browsers are out there. We'll get a rough idea by looking at our own websites statistics.

Which web browsers are visiting our website?

To get a rough idea of the browsers people are using, we used Google Analytics to examine our own site - Mutiny Webdesign.

The report gives us an idea of browsers used to visit our site. As our site is viewed by a lot of web developers and programmers, the percentage of Firefox users may be higher then other commerce sites.

• Firefox 49.92%
• Internet Explorer 39.50%
• Safari 5.01%
• Chrome 3.52%
• Opera 1.53%
• Mozilla 0.29%
• Camino 0.14%
• Konqueror 0.03%
• SeaMonkey 0.03%
• Mozilla Compatible Agent 0.02%

Unfortunately, Google Analytics doesn't show us the browser versions. We can find this (or at least find out what the browsers say they are) through server logs.

As we have stated, the easiest (in the long run) methodology is to test the site as its being build, in multiple browsers.
Testing this way in every web browser in existence would take unfeasibly long.
We need to make a short list of browsers to install for our "test in several browsers as you build" process.

Choosing the web browsers to install

Happily, several browsers in our list all use the same render engine.
Safari, Chrome, and Konqueror all use the "webkit" renderer to display pages - in 99% of cases, sites will display identically across all of these browsers. This is good enough for our quick test process.

We have decided to install the following browsers:

• 1. Internet Explorer 6, Internet Explorer 7
• Firefox 2, Firefox 3
• Google Chrome (single version)
• Opera (single version)

Without wishing to offend users of any other browsers, we feel that testing during our build process in the above browsers will be sufficient.
Before the site goes live, we would test in the full list of browsers.

Now we have a plan, we need to find methods to install multiple versions of Internet Explorer and firefox.

Installing multiple versions of Internet Explorer

At the very least, its worth installing Internet Explorer 6 and 7, and by the time you read this tutorial, possibly explorer 8 as well.
There are many ways to install more then one version of Explorer on Windows XP.

Vista does, as far as I can see, require a virtual machine to get full IE6 features. You can get pretty much all features using IEtester however (see section on this before installing a virtual machine).

If you go the virtual machine route, the virtual machine allows a new instance of Windows XP (with IE6 installed) to be ran from within Vista. All files are provided by Microsoft.

For XP

Multiple IE Installer includes an installation package for IE versions 3 to 6, configured to allow more then one version to be installed (and ran) at the same time.
Download and install the Multiple IE application

Multiple IE application

IE6 for Vista

There are two solutions that we use. The first is much quicker.

1st solution - IETester

Use the IETester utility, which is absolutely awesome.

This utility makes it very simple to test multiple versions of Internet Explorer from one browser interface. A couple of notes from the developer:

• The Previous/Next buttons are not working properly
• Focus is not working properly
• Java applets are not working
• Flash is not working on IE6 instance in user mode : A solution is to launch IETester as admin user and Flash will work.
• CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.

More info and download

2nd solution - virtual machine

1) Download and install Microsofts virtual machine
2) Download and install Microsofts "Hard Disk Image for testing websites with different IE versions"
3) Run the Virtual machine, and create a new virtual machine. Load the "hard disk image" VHD file relating to Windows XP with IE6 installed.

We have a few very brief tips to help code IE6 friendly websites, if you decide to. Thanks, Bill!

• don't use li in places where you need 0 margin
• use padding rather than margin where possible
• take care with floating elements
• ie6 handles things oddly and can make them wider than other browsers will, so setting an exact pixel width of two left floated elements may not work

Installing Firefox 2 and Firefox 3 so we can use both at the same time

We already have Firefox 3 installed. Do not install Firefox 2 just yet!

Your profile stores bookmarks, passwords and settings. It also determines which add ons are currently running in Firefox. Not all add ons are compatible between Firefox versions, so we are going to create a new, blank profile just for Firefox 2 to use.

To create a new Firefox profile:

a) close down any Firefox windows that are open.

b) Go to the start bar, and select "run"

c) Enter the path to Firefox into the run box. Use the format below:

"C:\Program Files\Mozilla Firefox\Firefox.exe" -profilemanager -no-remote

Firefox profile manager

(Note the speechmarks. The path to Firefox on your machine may be different.)

d) With the profile manager running, create a new profile for Firefox 2. We called ours "Firefox2".

Firefox 2 profile

When created, select "exit".

e) Download Firefox 2. It can be found here

f) Install Firefox 2. Select custom installation option. Install it into a directory called Firefox2.

Installing Firefox 2

g) Create a shortcut to Firefox 2. The shortcut will tell Firefox 2 to use the profile we created.

Firefox 2 shortcut

The target of the shortcut we created is: "C:\Program Files\Mozilla Firefox2\firefox.exe" -P firefox2 -no-remote
The "start in" area of the shortcut is: "C:\Program Files\Mozilla Firefox2".

This may differ depending on where it is installed on your machine.

This method also works if you have Firefox 2 installed, and want to add 3. Just be careful not to overwrite your default profile.

Using your multiple browsers effectively

Now you have IE6, IE7, Firefox 2, and Firefox 3 installed, you can quickly check your webpages for cross browser compatibility.
Minor changes between browsers are to be expected - use your own judgement as to what is acceptable.

Useful links:

Google Chrome
Opera