Struggling for Competence

Browser Differences

In recent work I've been using Chrome, Firefox and IE8. To be honest with you there doesn't seem to be much difference between their implementations of CSS 2.1. They all have a few quirks here and there, but they basically behave as their meant to.

Browser Market Share (September 2009)
BrowserMarket Share
IE626%
IE720%
IE819%
Firefox24%
Safari4%
Chrome3%
Opera2%
Other2%

This is good news if you want to develop a website with a CSS based design. However it is still necessary to make your website function with older browsers, in particular the lamentable IE6.

Browser Reset

Lots of the cross browser differences happen because of difference in browsers' default style. What happens is you develop in Firefox, say, and without realising come to rely on some parts of Firefox's default css. When you look in Chrome or IE8 you then see subtle differences in the positioning of the elements. The way to avoid this is to use a browser reset, which sets all the elements to have a common style. A basic reset sets the margin and padding to zero on all elements:


* {
margin:0;
padding:0;
}

More thorough, and better considered resets are Erik Meyer and YUI. You put the reset in before you begin developing, and tweak it for your own needs.

IE8 Compatibility Mode

IE8 has a compatibility mode which renders a web page "like IE7". By default IE8 will render localhost and the internet in IE8 standards mode, but will render the intranet in compatibility mode. To force IE8 into standards mode all the time add the following meta tag to the head section in your document:


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

IE6 The Horror

The best resource I found dealing with IE6 is the Ultimate IE6 Cheatsheet. Some good general advice it contains is:

It's also helpful to understand exactly what IE6 is meant to be able to do. This document shows the CSS compliance of IE 5,6,7 and 8.

There are 119 documented IE6 bugs. The Ultimate IE6 Cheatsheet covers 25 of the most common, but your quite likely to find more. If something odd is happening, the best advice is to keep googling; it's bound to have been seen and solved already. Some of the IE6 issues we had on our most recent project were: