Cross browser compatibility for CSS Jedi's

Over the years that I've been building websites I've run into just about every browser bug known to humankind. Back then we had to look after all sorts of hideous old browsers. Now things are simpler but there are still issues to look out for. Here I present my top six browser incompatibilities and the simple steps you can take to avoid them.

1 Never use padding on fixed width elements

A Padwan Error this!  Internet explorer interprets widths differently to other browsers. IE interprets widths as being the width of a block level element. Other browsers interpret widths as being the width of the content in the block level element. This is known as the box model bug. If you use padding on a block with a fixed width these values will be different and you'll run into problems.

The simple solution: Never use padding on an element with a fixed width. Either use margins on the elements within the block, or don't fix the width of the element.

2 Beware margins and padding on floated elements

Internet Explorer has a bug which means that margins and padding on floated elements are interpreted incorrectly, in fact they are doubled so your margins become twice as wide.

Simple solution 1: declare your floated block display:inline. This magically fixes all the issues. This is a dirty hack though so be careful, future browsers may come back to haunt you.

Simple solution 2: Don't use margins or padding on floated elements, instead use margins on the elements contained within your floated element.

3 Be careful with 0px;

Browsers tend not to like it when you tell things to display with height 0px. It's not logical, it's just the way things are. I've seen this affect Firefox and IE.

The simple solution: If you can use height:1px.

4 Beware 100%

Computers use base two maths, humans tend to use base ten. When converting between the two you're going to get rounding errors. This is especially obvious in float layouts in IE. If the total width of your floats is 100% you will often run in to problems

The simple solution: With float layouts make sure the total width of your floats is less than 100%. 99.5% is fine.

5 Remember to clear floats

If you have a floated element that may be taller than it's containing block, remember to clear it if you don't want it to extend outside the block. Currently the best way to clear a floated element is to add another div inside the containing block and set it to clear both. IE clears floated elements automatically but other browsers do not.

The simple soution: Watch your clearers. If you're developing in IE, remember to put them in.

6 Keep text sizes consistent with % and ems

One issue that comes up often is the problem of text sizes in firefox and IE. IE tends to render text larger causing all sorts of problems. Some designers get around this by using pixel sizing, for example they might say something like

While this does enforce consistency it causes problems for IE users as it prevents them from resizing their text  in their browser preferences. This is an issue for people with poor sight. Thankfully there's a solution

The simple solution: To get around this, declare a % font size on your body, then size the rest of your text using ems. For some reason this works absolutely flawlessly in both IE and Firefox. For example you might do something like this:

If you follow these guidelines you should have no trouble creating beautiful websites that work happily in every browser.