Cross browser compatibility: Making Internet Explorer behave

For most layouts there are two stages. Make it work for standards based browsers such as Firefox, then make it work for that pesky IE. Ignore the second step and as much as half your site visitors may not see what you want them to see.

Making designs work in IE is not easy. It has a bizarre box model which results in margins and padding being calculated differently. It has numerous bugs which result in extra spaces being added in unexpected places and background images doing things they were never intended to do, and all this is without even talking about Internet Explorer’s handling of JavaScript. However, there is usually a way to coax Internet Explorer into submission while still sticking to web standards.

Over the years I have collected a set of techniques that enable me to get IE to comply. These techniques are often weird and unintuitive, such as adding a height of 100% to a div if IE is removing the background image.

What I have found is that by testing against the best browser on the market (Firefox) and the worst browser (IE 6) and making a design fit to both of them, the resulting code will work on virtually any browser.

For most layouts there are two stages. Make it work for standards based browsers such as Firefox, then make it work for that pesky IE. Ignore the second step and as much as half your site visitors may not see what you want them to see.

Making designs work in IE is not easy. It has a bizarre box model which results in margins and padding being calculated differently. It has numerous bugs which result in extra spaces being added in unexpected places and background images doing things they were never intended to do, and all this is without even talking about Internet Explorer’s handling of JavaScript. However, there is usually a way to coax Internet Explorer into submission while still sticking to web standards.

Over the years I have collected a set of techniques that enable me to get IE to comply. These techniques are often weird and unintuitive, such as adding a height of 100% to a div if IE is removing the background image.

What I have found is that by testing against the best browser on the market (Firefox) and the worst browser (IE 6) and making a design fit to both of them, the resulting code will work on virtually any browser.

Update: As Youtube.com has officially dropped support for IE6 and many other development firms are following suit, I have decided to only support IE6 when specifically requested and with some extra hours calculated into the price. IE7 will be tested thoroughly as a standard.