The width of an object in CSS

The width of an object is technically defined by the content area alone; however, these older versions of IE defined the width incorrectly, so any CSS object set with a width is actually measured incorrectly. This can wreak serious havoc on layouts, since the measurements for the dimensions of objects on pages are all wrong.

IE 6.0 in “standards” mode fixed this. However, it is now different from Internet Explorer 4 and 5, so Web authors have to deal with more than one measurement model while laying out pages using CSS.

What Microsoft did was define the width as including the content, padding, and borders. To help correct this problem, Microsoft introduced the DOCTYPE switch and “standards” and “quirks” modes that measure differently. However, their box model was different previously, so the “standards” and “quirks” differences are greater than many other Web browsers’ differences in these two modes. Other browsers have smaller nuances that happen in “quirks” mode, but they need to be watched for as well.

Web authors new to building Web standards-based layouts, but who may have built pages using Internet Explorer 5.x’s CSS box model, are in for a surprise when other browsers render the pages differently. Oftentimes, the belief is that other browsers were getting it wrong, or something broke in IE 6.0. The truth is, something was fixed, and the other guys had it right.