Boot Camp

In this example, the style rule would be:
Page Layout Code - Part 2
div {width: 100px; padding: 10px; border: 5px solid black; margin: 10px; }
The top box is the standard - when this element is given a width of 100px, the width affects
only the white portion, and the additional padding, border and margin affect the areas
you see in gray.
Internet Explorer, however, interprets the width of 100px to be the “width” referred to the
area within the outer edges of the black borders, but not including the margins. This has
been corrected in IE 8, but the bad news is that web authors still need to design web pages
that can be accurately viewed in earlier browsers, especially IE6 and 7.
As a result, you may find that pages which lay out properly in Firefox and IE 8 have
troubles in IE 7 and earlier. How do you deal with this? Well, with much coffee, cursing,
threats to the computer, and patience, you can do a couple of things.
• Create conditional style sheets. One would default to most browsers, and another
would be specified for IE6 and older IE browsers, with style differences that affect
the box model irregularities. This tends to be the simplest and most easy to maintain,
plus minimizes side effects of CSS hacks and conditional code.
• Use conditional comments in HTML source code, which are conditional statements
interpreted by Microsoft Internet Explorer. Conditional comments first
appeared in Microsoft’s Internet Explorer 5 browser and are supported through at
least version 8.
• Use of CSS filters or hacks, which are a coding technique used to hide or show
CSS markup depending on the browser, version number, or capabilities. Browsers
have different interpretations of CSS behavior and different levels of support for
the W3C standards. CSS filters are sometimes used to achieve consistent layout
appearance in multiple browsers that do not have compatible rendering. Keep in
mind that box model hacks have proven unreliable because they rely on bugs in
browsers’ CSS support that may have been fixed in later versions.
Since a web author’s goal is to create and maintain as clean and pure of code as possible,
you want to avoid CSS hacks and conditional code as much as possible.
DIV Page Layouts
The table structure for website layout offers much more control than simply designing a
page from top to bottom (primeval HTML). However, tables have serious limits for posi-
217