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.

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:

• Develop in standards compliant browsers first. The compliant browsers all render in a fairly similar way, so you start off in a good position. Also you learn how to do CSS properly, before learning hacks.
• Validate your xhtml and css.
• Use jQuery. This irons out many cross browser Javascript incompatibilities.
• Use a correct doctype. This stops IE6 quirks mode, and in particular means the box model will be correct.
• Use a conditional comment to add an IE6 specific "hacks" stylesheet. This concentrates the IE6 weirdness in a single place and stops it polluting the main style. The following code adds Ie6Hacks.css if the browser is less than or equal to IE6. You put it in the head element:

  
  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href='Ie6Hacks.css' />
  <![endif]--> 
  
  

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:

• IE6 select z-index bug. The bug is "You have a select box on the main page. When you open a pop-up the select box shows through into the pop-up." There is no CSS based fix for this bug. Fortunately we were using jQuery dialogs, which have the bgiframe option to specifically fix this problem. When the dialog opens, bgiframe covers the select boxes with iframes which stops showing through.
• IE6 invisible text next to a floated right element. The bug text to the left of a right floated element turned invisible. The bodge is to a position:relative to the container containing the text.
• Incorrect cursor on hyper-links. For some reason hyper-links in IE6 and IE7 didn't have the pointer cursor (which looks like a hand), but instead had the text cursor. The fix was to reapply the pointer cursor to the a element: a { cursor:pointer; }
• Menu lists stacked vertically instead of horizontally. It's fairly common to use an unordered list to represent menu items for site navigation. Our initial css used float:left on the <ul> and <li> elements to make the list items render horizontally, across the top of the page. This didn't work in IE6, which stubbornly showed a vertical list. The solution was to change the <ul> and <li> elements to display:inline; as described in this Taming Lists article.