3.4 Hacks for non-compliant browsers
As the various Internet browsers and web standards have been evolving continuously over the years, of course there have been issues with cross-browser compatibility. Sometimes a webpage will render differently on one browser, such as Internet Explorer, than it will on another, such as Apple Safari. These bugs are gradually being ironed out in the newer browser versions, but the most noted problem in the web design community has to be the Internet Explorer Box Model Bug.
If the width property is omitted from an element, most browsers will calculate the overall width as being:
Contents + padding + border thickness + margin.
If the width is specified, then again most browsers will calculate the overall width as being:
Width + padding + border thickness + margin.
Unfortunately Internet Explorer 6 (and below) is nortoriously different and will take any specified width as being the width regardless of padding, border and margin. As a result, additional styling known as "hacks" are often required in the stylesheet to allow for this (note that IE7 works fine) otherwise webpages may not render correctly. IE6 is well outmoded due to IE7&8 but unfortunately is still prevailant in many companies where Internet access is granted to employees. However, it will eventually dissapear and this problem will cease to be.
These hacks are described in detail in the section on Common Bugs, but perhaps the best way to avoid problems with IE's non-compliance with the box model is to apply any padding and margin to the contents of any divs, rather than to the divs themselves, and avoid using side borders (background colours can be used to highlight column divs instead).