How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)

We all know the importance of checking our web pages with multiple browsers, especially when we are designing a new layout for a website. This is the case even if we are writing validated standards-compliant code. The number of extant browsers we need to check with are enormous: Internet Explorer (IE) 7, 6, 5.5 and 5.0, Firefox 2.0 and 1.5, Opera 9 and 8, and so on. And then there are the different platforms: Windows, Macintosh (Mac), Linux, etc. The problem for most people is that multiple versions of certain browsers cannot co-exist with each other, the most notable example of this is IE for Windows. Unless you are privileged to have multiple computers, this presents a certain difficulty for the average webmaster. This article suggests some ways for you to run multiple versions of multiple browsers on one computer.

Note that this article is written primarily from the point of view of a person using Windows (the majority of people reading this article), although it does address the issue of Mac browsers and Linux browsers as well.

Firefox, the Mozilla Suite, Seamonkey and Netscape

It's possible for different versions of Firefox, Netscape and the old Mozilla browser to all co-exist on the same machine. ( )

If you did not already know, Mozilla Firefox, Seamonkey, Netscape 6/7/8 (and later) and the (old) Mozilla Suite browser use the same Gecko rendering engine. As such, if you have Netscape 6.X, you are in effect using the rendering engine of a beta version of Mozilla (one of the 0.9.X series); if you use Netscape 7, you are using the Mozilla 1.0.X engine; and if you use Netscape 7.1 you're using the same engine as Mozilla 1.4. The point is that you don't have to install, say, Mozilla 1.0.X if you're using Netscape 7, and so on.

It is easy to make these versions of Netscape/Mozilla/Firefox co-exist with each other. Install them into separate directories and create a different profile for each browser you install. (For non-Netscape/Mozilla users, this browser allows you to create different profiles so that you can store different settings for different situations.)

To create a different profile for Firefox, simply start Firefox with the following command line:

Once you've finished creating profiles, you will want to create shortcuts (Windows terminology) to run the different versions of the browser. This makes life easier for you: you can simply click the appropriate icon for the different versions, and it will load using the correct profile. To specify which profile the browser is to load, put the profile name after the "-P" option.

For example, if you have created a profile named "netscape6", your command for running (say) Netscape with that profile may look like:

"C:\Program Files\Netscape\Netscape 6\netscp6.exe" -P netscape6

Similarly, your command to run the Firefox with a profile called "firefox" may look like:

"c:\Program Files\Mozilla Firefox\firefox" -P firefox

And so on.

I'm not sure that you really need all the different implementations of the Gecko engine to test, though. I personally only test my sites with latest version of Firefox since my site design tends to be simple.

Opera for Windows/Linux

Opera is the third most used browser used on thesitewizard.com and thefreecountry.com, and is particularly popular among the seasoned webmaster community (which probably explains why so many of my visitors use it).

Opera 6, 7, 8 and 9 can co-exist on one computer. If you want to install multiple versions on Windows, simply put them in separate directories. No extra steps are required. I don't know if this also works with earlier versions of Opera, since I don't bother to check my site with those.

As for Linux, at the time I write this, I have only tested version 6 of Opera on this platform, so I have no idea if two versions can co-exist here.

You can obtain Opera for any of its supported operating systems from Opera's website. To get older versions, just navigate to the downloads page and click the "Opera archives" link.

Internet Explorer 5.0, 5.5, 6 and 7 for Windows

In all my sites, at the time of this writing, IE users comprise the majority of visitors, with the number more or less divided between IE 6 and IE 7.

My experience in coding the recent new designs for thesitewizard.com and thefreecountry.com, both of which depend heavily upon Cascading Style Sheets for layout, is that IE 6 is a very different animal from the other browsers or even the later incarnations of IE. Contrary to what you may expect, what works in IE 7, Opera, Firefox and Safari does not necessarily work in IE 6. It seems that IE 6 has a number of bugs in its CSS box model, causing sites that are correctly coded to break under that browser. This is not to say that version 7 has all of IE's notorious CSS bugs fixed. It is thus important that webmasters install multiple versions of IE.

Unlike Opera, Firefox and Netscape, you can only install one version of IE in a single installation of Windows. The bulk of IE's code does not get installed into its own subdirectory (or folder) but into Windows' system directory. Although there have been solutions available for some time among the webmaster community for installing different versions of IE into the same Windows installation, there are peculiarities in the end result and the IEs you get from that behave slightly differently from the standard version when installed normally.

Method 1: Running More than One Version of Internet Explorer on a Single Machine Using a Virtual Machine or Emulator

The recommended method nowadays to run multiple versions of IE on one machine is to install an emulator or one of those virtualization software that creates a virtual machine (sometimes called a virtualizer). This is also the method Microsoft favours.

Loosely speaking, an emulator allows you to run another copy of Windows within your existing version of Mac OS X, Windows, Linux, FreeBSD or whatever. The emulator pretends to be a new computer, and Windows gets installed into a small space on your hard disk which the emulator uses to mimic an entire drive.

You can find a list of free PC emulators listed on thefreecountry.com's Free PC (x86) Emulators and Virtualization Software page.

Some of the emulators listed there, such as Bochs, allow you to emulate a PC machine on which you can install Windows or Linux or any other PC operating system. Bochs itself may be installed on Windows, Linux, Mac, and possibly other systems and machines as well. If you are a Mac user, this is one way to run the Windows version of IE without having to buy a PC.

Be warned though that full emulators like Bochs are extremely slow. You may be able to tolerate it though, if you are only using it to test your web pages once in a blue moon.

If you already have a PC or an Intel x86 machine (like the modern Macs), another solution is to run virtualization software that can create virtual machines. While emulators can pretend to be a completely different machine, such as a 68k Mac pretending to be a PC, virtualization programs merely sets up a space within your existing machine and runs a new copy of the operating system (such as Windows) within that space. The new copy of Windows thinks that it is the only one running, even if you are running it within yet another copy of Windows. Since virtual machines do not have to emulate a completely different machine, they tend to be faster than full emulators.

Free virtual machines / virtualization software can be found on the same page as the emulators on the Free PC (x86) Emulators and Virtual Machines page. However, as mentioned earlier, the Bochs emulator, listed on that page, is excruciatingly slow (at this time). If you use a Mac, you may prefer to use a commercial solution like Parallels Desktop for Mac (and Workstation) to preserve your sanity.

Once you have obtained an emulator or virtualization software, you simply install a new copy of Windows in each "machine" you set up. For each copy of Windows you set up, install a different version of IE, and you're done.

Note: Microsoft provides pre-activated copies of XP with IE6 and IE 7 in virtual machines free of charge for developers who need to test their sites in IE 6. The pre-activated XP expires periodically, so you will need to download a fresh copy from time to time. I'm not sure when they will stop providing these, but at the time this was written, the copies are still available. You will also need to get a copy of Virtual PC, which is listed on the Free PC (x86) Emulators and Virtual Machines page.

Method 2: Running Two or Three Versions of IE on One Machine By Dual Booting

Another way to run two versions of IE on a single machine is to install two versions of Windows in that machine, each in its own partition. That is, install Windows 95/98/ME (ie, either Windows 95 or 98 or 98 Second Edition or ME) onto one partition on your hard drive, and install Windows 2000 or XP in another partition in a dual-boot configuration.

In plain English, this means that you need to partition your hard disk into (at least) two partitions. First install Windows 95/98/98SE/ME into drive C:. When you finish that, run the Windows 2000 or Windows XP setup program from within the first version of Windows you installed. Select the "Clean install" option and not the "Upgrade" option when you're asked. You will be presented with a window later where you can click the "Advanced options" button. In the window that is displayed, check the box labelled "I want to choose the installation partition during setup". Later in the installation process, when you are asked, choose to install Windows 2000 (or XP) in the second partition. Windows 2000 or XP will then (automatically) install a menu that appears when you start up your machine, allowing you to choose the version of Windows you want to boot.

It is apparently also possible to install three versions of Windows (and hence three versions of IE) into one machine without resorting to third party software. You'll need to have at least three partitions on your hard disk to play with. Install Windows 95/98/98SE/ME into C: and use the above procedure to install Windows 2000 into the second partition. Finally, use the same procedure to install Windows XP into the third partition. I have not tried "triple booting" three Windows versions before, but one of thesitewizard.com's visitors has assured me that it works. With three versions of Windows to play with, you should be able to use three versions of IE on the same machine.

Note that Windows 95 installs IE 3 by default, Windows 98 installs IE 4, Windows 98 Second Edition installs IE 5.0, Windows 2000 installs IE 5.0, Windows ME installs IE 5.5 and Windows XP installs IE 6.0, so if you might want to plan carefully which Windows version you install so that you get the IE version you need for testing. As far as I know, you can't easily (if at all) "downgrade" a version of IE (although you can upgrade it), so if you need something as old as IE 4, you might need to install Windows 98 (or even Windows 95 and upgrade IE to 4.0).

Note: Unless you have special reasons why you need to dual boot into an old version of Windows (like Windows 98, etc), this method is not very useful nowadays. Aside from the hassle and amount of space it needs, the old versions of browsers like IE 4 and 5 are hardly used anymore. You will find it easier to use the virtual machine/emulator method I described earlier.

How to Test Mac Browsers

At this point in time, probably the only way to run a Mac browser like Safari, Camino, Firefox, Opera, etc, is to actually own a Mac.

While there are free emulators for the Macintosh to emulate a 68k or PowerPC Mac, they are not particularly useful from a webmasters' point of view. The Mac emulators for the older 68k Macs (like Quadra, Performa, etc) require you to own the ROM from one of those Macs before the emulator will work. However, even if you have a copy of the ROM, these Mac emulators can only emulate very old versions of Macs, which only run browsers like IE 4 and Netscape 4.

The situation with the PowerPC Mac emulators is not much better. These emulators are not quite complete yet. And even if they were complete, with Apple's move to Macs powered by Intel's processors, the PowerPC Mac emulators are also obsolete.

However, all is not lost. In general, if you test the validity of your website's code using a validator, check your site using Opera, Firefox and the Windows version of Safari, the chances of your site showing up properly in the Mac version of Firefox, Opera and Safari are high. The three browsers probably share the same rendering engine across platforms. Of course if you want to be sure, particularly if your site requires images and text to be aligned very precisely, you should get a real Mac.

Testing Linux Browsers

One of the easiest ways to test your site so that you can see how it appears under Linux is to run Linux from a CD or DVD. There are numerous Linux "live" CDs around; see the Free Linux LiveCD Distributions page for a list of them. These allow you to simply boot your machine from the CD directly into Linux without having to install anything onto your hard disk. Essentially, all you have to do is to download an ISO of the Linux distribution (which is just an image of the CD), burn it to your CDR, put it in your CD or DVD drive, and restart your computer. The computer boots from the CD and runs Linux without installing anything on your hard disk. From the CDROM, you can run many Linux applications, including the Linux version of Firefox and Konqueror.

If you are feeling lazy, and you have installed an emulator or a virtual machine, as mentioned above, you don't even need to burn the ISO to a CD. You can simply use the virtual machine to boot the ISO - your copy of Linux will then run in the virtual machine.

Alternatively, if you prefer to install Linux on your hard disk, using one of the many free Linux distributions around, you can set it up so that it co-exists with Windows. Make sure you have space for a new partition on your hard disk, install it and you're done. Yet another way is to install Linux in a virtual machine.

The default browser that comes on many Linux distributions is Firefox (although not necessarily so). However, you will find that even though Firefox basically renders your page identically for all platforms, the fonts available under Linux are different from those available on Windows. If you don't code your font tags or CSS font-families in a cross-platform compatible way, your site may wind up being rendered with an ugly font. For example, many sites simply specify "Arial" or "Impact" or some such Windows font for their site. Since these fonts are not available by default under non-Windows systems, including Mac and Linux, your site will be rendered using either the default font on those browsers or some other font that the browser thinks matches the type of font you've specified. If you don't want to bother to run Linux to test, be sure that you at least:

1. Test your pages under Firefox for your platform.

2. Specify generally available alternative fonts for your web pages. For example, don't just say,

   font-family: Arial ;

   in your style sheet, say

   font-family: Arial, Helvetica, sans-serif ;

   instead.

There are a number of other browsers available on the Linux platform. You may have seen them in your web logs. They include, for example, Konqueror, Opera for Linux and Mozilla spin-offs.

Conclusion

It's a good idea to test your site with multiple versions of multiple browsers, particularly if you plan to do anything fancy with style sheets on your site. This doesn't mean that you have to support all browsers - for example, the pages on thesitewizard.com do not work well (if at all) under IE 4 and Netscape 3 (and earlier). However, when you are able to test your pages this way, you can at least reduce the number of problems your pages have with the different browsers. The tips in this article allow you to test with multiple browsers even if you have only one machine.

Copyright 2003-2007 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/.

If you find this article useful, please consider making a donation.

thesitewizard™ News Feed (RSS Site Feed) 

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

• Appearance, Usability and Search Engine Visibility in Web Design
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Standards-Compliant WYSIWYG Web Editor)
• Two Common Web Design Myths
• Designing for Browser and Platform Compatibility
• Which Web Host Do You Recommend? (FAQ)
• How to Register Your Own Domain Name
• Free HTML Editors and WYSIWYG Web Editors
• Free FTP Clients
• Is Your Site Ready for the Average User?

New Pages

• How to Add the Copyright Symbol to Your Web Page
• How to Create and Use Cookies in PHP
• How to Insert Google AdSense Advertisements into Your Blogger Blog
• How to Design a Two Column Layout for Your Website Using CSS
• Is It Legal to Use Any Piece of Music, Image, or Article for my Website? And Other Questions on Copyright Relevant to Webmasters
• Why Do the Pictures on My Web Page Not Show Up in Nvu / KompoZer? Troubleshooting the Broken Images on Your Page.
• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
• Should You Use Cloaked Domain Redirection to Point to Your Website?
• Why Is My Site Not Ranking in the Search Engines?
• What Sort of Website Should I Create In Order to Earn Money?

Popular Pages

• How to Start / Create Your Own Website: The Beginner's A-Z Guide
• Tips on Choosing a Good Domain Name
• How to Create a Search Engine Friendly Website
• Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3
• How to Design and Publish Your Website with Nvu (free WYSIWYG web editor)

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking)