CSS Box Model and Standards Un-Compliant Browsers

One of the frustrating things in web design currently is the failure of major browsers to stick to one set of standards in what html tags are supported and how they are interpreted. If you are designing using CSS, it doesn't take long to realise that using the margin, padding and width properties often results in some stray pixels. The rule governing these things is called the CSS box model.

Unfortunately, IE5/win had its own ideas about the box model and interprets width as the distance between the outer edges of the box borders whereas the correct interpretation is the distance between the outer edges of the actual content (the inner edges of the padding).

This is just one of the many problems you encounter when you start thinking beyond how your page renders in just your own browser with your screen resolution. The method I use on my sites to reign in those pesky browser variations is to use a strict document type definition (DTD) on all pages. It can restrict some aspects of your creativity, but in terms of getting everything in the same place in different browsers, it makes things a lot easier. To do this, just add the following as the first line of your HTML document (before the tag):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> If you use Javascript, your problems will increase even further! The way Javascript is interpreted is different for pretty much every browser and often your functions will require some tweaking or even a number of separate parts to achieve the same results on different browsers.

Everyone join the campaign for standards compliance among browsers so we can stop losing time making our pages cross-browser compatible!!

Jon Collins has nearly 10 years experience of taming HTML. For more information that will make your website stand out from the crowd of average sites, visit UK Webmaster Advice.