As web designers are all too familar with, no two web browsers interperate every single piece of CSS the same. So, we need to test our sites on more than one browser to make sure our site displays the same in all of them. Your site might not display 100% the same in each browser, but as long as it displays 95% the same, you are ok. And, usually, it will.

Which Browsers should I Test In?
Good question, and one which is up for debate. Stats here from Web Reference show the % of which browser is used by users visiting their site. After a quick skim I have these as the major browsers:

FF2.0.0.7 - 23.51%
FF All - 29.93%
So, nearly a third of users on the internet use FF, and the majority use FF2.0+. So, we need to test our sites in this.
IE6 - 23.63%
IE7 - 16.95%
IE All - 42.09%
As you can see, the majority still lies with IE, so we most include IE6 + IE7 in our testing. There is some debate that IE5 should be included, but with just 1.46%, I don’t think we need to.

Setting the Browsers Up
Firefox 2.0.0.7 is downloaded free of charge here.
To run more than 1 version of Internet Explorer, you can use this free tool: http://tredosoft.com/Multiple_IE
It will install up to IE6 so I recommend that you install IE7 then install this tool.

Browser Interpretation
You will find that the difference between displaying code in IE7 & FF2 is very slim. Usually any hacks need to be applied to IE6. Luckily, there is a simple way. Simply add * html at the start of your CSS command. Example:

For IE7 & FF:
#navigation {
margin-left: 50px;
}

For IE6:
* html #navigation {
margin-left: 80px;
}

Add both of those in the same style sheet. IE7 and FF2 will not use our CSS for IE6, making it the perfect work around. Good luck!

Categorised under: Browsers, CSS, Design & Layout by Jack F