brief introduction to the box model

Brief Introduction to the Box Model

As we know, web pages designed using Web Standards are laid out using boxes of various sizes and shapes. The boxiness of even the most fluid-looking of web sites can be revealed using the Web Developer Toolbar Firefox plugin with the Outline Blocked Elements option selected:

brizk design no boxes

brizk design with boxes

Designers create header boxes that hold the contents of the header. They create content boxes that hold the contents of the page below the header and navigation toolbar boxes (in the shape of rectangles) that hold the navigation bar. Blog posts are wrapped in their own box. And so on. In WordPress these boxes are composed with the following XHTML code:

  • header: <div id="header"> </div>
  • navigation: <div id="nav"> </div>
  • contents: <div id="contents"> </div>
  • post: <div class="notable-post"> </div> or <div class="box"> </div> (this can vary)

Each of the boxes needs to be styled individually in the CSS file. One would think this would be easy; you just style it as you would any other element. If only that were the case. The problem is that Internet Explorer implements box styles in a way that does not comply with W3C standards. The culprits: pre-Internet Explorer 5.0 versions for Mac, Internet Explorer for Windows versions 5.0 and 5.5, and Internet Explorer 6+ when a page is rendered in “quirks mode.” Because boxes are implemented differently in these browsers, web pages wind up looking different depending on the browser used to display it.

This would drive designers crazy—especially because Internet Explorer is the most used web browser. The solution, however, is a quick and easy hack—the Tan Hack—that tricks the browsers into displaying the box exactly as you want it to be displayed by taking advantage of understanding how it interprets box styles. But, before we get to the hack, we must understand what the Box Model is and why it is important.

The Box Model

The Box Model is a group of CSS elements that when rendered together around any content (text, images, etc.) create shape of a box. These CSS elements include: width, padding, border, and margins. They can be visualized like this:

The Box Model

When creating any element in CSS that you are going to apply a width to, we must understand the relationship between the property and the actual box that will be created. Consider the following W3C standards-compliant correct way for implementing the Box Model:

#box {
width: --> content area only
border: --> the width of the border line
padding: --> the width of the padding
margin: --> the width of the margin
}

The total width of a standards compliant box, then, equals width + border width + padding width. We can ensure that all boxes are displayed in a way consistent with W3C standards by making sure that all of our pages have a proper DOCTYPE. All WordPress theme use a proper DOCTYPE in the header.php file. For example, the first 3 lines of the WPFolio header.php file:

WPFolio header.pho lines of code

But, if you’re ever deigning a page outside of WordPress, you can can see SAMS HTML in 24 Hours or this site to determine which DOCTYPE to use.

Not all browsers, however, have implemented the Box Model in a manner that conforms to W3C standards: IE5.x/win, pre IE/Mac 5.0, and IE 6+ in “quirks mode” use the following when creating boxes:

#box {
width: --> total width of the box (width + border + padding)
border: --> the width of the border line
padding: --> the width of the padding
margin: --> the width of the margin
}

Here is a visual representation of how widths are understood by the different browsers:

W3C and Internet Explorer box models

So, when we have the following code:

#box {
width: 760px;
border: 1px solid gray;
padding: 10px;
margin: 10px;
}

We will get the following correct Box Model in Firefox, IE6/win (in standards mode), Safari, Opera, IE/Mac 5.0+, which has a content area width of 760px and a total overall width of 782px (760px + 1px + 1px + 10px + 10px = 782px):
Correct Box Model

However, when the Box Model is implemented incorrectly, as in IE5.x/win, pre IE/Mac 5.0, and IE6+ in quirks mode, we get the following box, which has a content area width of only 738px and an overall width of 760px (760px - 1px - 1px - 10px - 10px = 738px):
Box Model Incorrect

Note that though margins are an important part of the Box Model, they are not factored into the equations when determining the width of boxes.

So, if you ever decide to create a page that does not use a DOCTYPE you can enjoy doing the math above every time you create a new box element. And, to ensure that your site is displayed correctly on all browsers, you will need to implement something called the Tan Hack (see below).

Implementing the Box Model with a Proper DOCTYPE

To implement the Box Model we need to do several things:

  1. Determine where we want the box to appear
  2. Determine the exact width of the box (width of content area + width of the padding + width of the border)
  3. Determine the exact height of the box
  4. Add the proper box XHTML code the HTML or PHP file
  5. Add the proper box styling to the CSS file
  6. If using an image, implement it properly in the HTML/PHP and CSS files
  7. Upload the HTML or PHP and CSS files to the server using FTP

For example, let’s assume we want to add a new box to the header.php file that stretches the width of the web site and we want to add a custom image that fills the box completely. For our purposes, we know that this box will be placed in a container area that has a width of 782px (as depicted above). To successfully add the box, we follow these steps:

  1. Location of the box: in the header.php file; it will stretch the width of the web site and hold an image that fills it completely (that is, it should not have any padding). We also want it to have a 1px border.
  2. To determine the width of the box, we need to know one important thing first: the width of the box in which this box will reside. For our purposes, it is 782px and has a 1px border and 10px padding. To determine the size of the box that will fit in this area, do the following calculation:

    782 pixels (container width)
    - 1 pixel (left container border)
    - 1 pixel (left container border)
    -10 pixels (left container padding)
    -10 pixels (right container padding)
    760 total pixels wide (banner box width)

    The total width of the box is: 760px (width + padding + border).

    In order to determine the exact width of the image, we must do one more calculation: overall box width minus border and padding widths:

    760 pixels (overall banner width)
    - 1 pixel (left banner border)
    - 1 pixel (left banner border)
    - 0 pixels (left container padding)
    - 0 pixels (right container padding)
    758 total pixels wide (banner image width)

    So, to review, we want to code the box to be 760px wide and we want our image to be 758px wide so it fills the box completely.

  3. Determining the height of the box is easy: it can be anything. Because we want our image to fill the box completely, we will make the height of the box equal the height of the image. For this example, the height of out image is 125px.
  4. To the header.php file we will add the following code to create the box:
    <div id="banner">

    </div>

  5. To the styles.css file, we will add the following code to style the box:

    #banner {
    width: 758px
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    }

  6. To add our image to our page we can do either of two things: add the image to the XHTML/PHP file or add the image in our CSS as a background. Each has its benefits and drawbacks. By placing the image in XHTML/PHP you are able to have ALT text, which you are not able to do using CSS code. But, having the image in the CSS file allows for more complex visual layouts, and there are several ALT text workarounds.To add an image in header.php we, of course, use the following code:

    <div id="banner">
    <img src="image-file-with-extension" alt="my banner image" width="758" height="125" />
    </div>

    Or, to add the image in our stylesheet, we use the following code:

    #banner {
    width: 758px;
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    background: url('image file with extension') no-repeat top left;
    }

    Making an image accessible to screen readers is not that difficult; it just means tricking the screen reader and a sited user of a page. The goal is to make the screen reader think there is text and at the same time hide it from a sited user. To do this we will be using a context specific element and negative margins. For example, consider the following CSS:

    #banner {
    width: 758px;
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    background: url('image file with extension') no-repeat top left;
    }

    #banner p {
    margin-left: -5000px;

    }

    and its related XHTML in the HTML/PHP file:

    <div id="banner">
    <p>The banner for my web page.</p>
    </div>

    A screen reader will read “The banner for my webpage,” but because our CSS code positions the paragraph tag 5000 pixels to the left a sited user will never see it.

  7. Upload the image, header.php, and style.css files to the server via FTP and you will get a box that looks like this:banner with image 758px wide

The Tan Hack

As a result, to trick the Internet Explorer browsers that implement the Box Model incorrectly, we must implement a Box Model Hack—The Tan Hack. The Tan Hack assigns non-standards compliant versions of Internet Explorer a false width value (the total value of the width we actually want).

Here, for example, we want an overall width of 782px (content + padding + border). By assigning the width of 782px in the Tan Hack portion of the code, our content area will wind up being 760px (782px - 10px - 10px - 1px - 1px = 760px), which is the width of the content area in standards-compliant browsers.

#container {
width: 760px; /* The width as understood by IE browsers & the width of desired content area */
border: 1px solid gray;
padding: 10px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}


* html div #container { /* This is the Tan hack */
width: 782px; /* The width as understood by standards compliant browsers */
w\idth: 760px; /* This width reverts back to the IE width and is read by IE browsers */
}


#banner {
border: 1px solid #CCC;
height: 125px;
}

This CSS code will create a page that looks like the following, with necessary height and width measurements (for our purposes, I have removed the sidebar and content area):

Banner skeleton

Implementing the Box Model with the Tan Hack

To implement the Box Model we need to do several things:

  1. Determine where we want the box to appear
  2. Determine the exact width of the box (width of content area + width of the padding + width of the border)
  3. Determine the exact height of the box
  4. Add the proper box XHTML code the HTML or PHP file
  5. Add the proper box styling to the CSS file
  6. If using an image, implement it properly in the HTML/PHP and CSS files
  7. Upload the HTML or PHP and CSS files to the server using FTP

For example, let’s assume we want to add a new box to the header.php file that stretches the width of the web site and we want to add a custom image that fills the box completely. For our purposes, we know that this box will be placed in a container area that has a width of 782px (as depicted above). To successfully add the box, we follow these steps:

  1. Location of the box: in the header.php file; it will stretch the width of the web site and hold an image that fills it completely (that is, it should not have any padding). We also want it to have a 1px border.
  2. To determine the width of the box, we need to know one important thing first: the width of the box in which this box will reside. For our purposes, it is 782px and has a 1px border and 10px padding. To determine the size of the box that will fit in this area, do the following calculation: 782 pixels (container width)
    – 1 pixel (left container border)
    – 1 pixel (left container border)
    -10 pixels (left container padding)
    -10 pixels (right container padding)
    760 total pixels wide (banner box width)

    The total width of the box is: 760px (width + padding + border).

    In order to determine the exact width of the image, we must do one more calculation: overall box width minus border and padding widths:

    760 pixels (overall banner width)
    - 1 pixel (left banner border)
    - 1 pixel (left banner border)
    - 0 pixels (left container padding)
    - 0 pixels (right container padding)
    758 total pixels wide (banner image width)

    So, to review, we want to code the box to be 760px wide and we want out image to be 758px wide so it fills the box completely.

  3. Determining the height of the box is easy: it can be anything. Because we want our image to fill the box completely, we will make the height of the box equal the height of the image. For this example, the height of out image is 125px.
  4. To the header.php file we will add the following code to create the box:
    <div id="banner">

    </div>

  5. To the styles.css file, we will add the following code to style the box:
    #banner {
    width: 758px; /* The overall width as understood by IE browsers & width of desired content area */
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    }


    * html div #banner { /* This is the Tan hack */
    width: 760px;
    /* The width as understood by standards compliant browsers */
    w\idth: 758px; /* This width reverts back to the IE width and is read by IE browsers */
    }
  6. To add our image to our page we can do either of two things: add the image XHTML/PHP file or add the image in our CSS as a background. Each has its benefits and drawbacks. By placing the image in XHTML/PHP you are able to have ALT text, which you are not able to do using CSS code. But, having the image in the CSS file allows for more complex visual layouts, and there are several ALT text workarounds.To add an image in header.php we, of course, use the following code: <div id="banner">
    <img src="image-file-with-extension" alt="my banner image" width="758" height="125" />
    </div>

    Or, to add the image in our stylesheet, we use the following code:

    #banner {
    width: 758px; /* The overall width as understood by IE browsers & width of desired content area */
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    background: url('image file with extension') no-repeat top left;
    }


    * html div #banner { /* This is the Tan hack */
    width: 760px;
    /* The overall width as understood by standards compliant browsers */
    w\idth: 758px; /* This width reverts back to the IE width and is read by IE browsers */
    }

    Making an image accessible to screen readers is not that difficult; it just means tricking the screen reader and a sited user of a page. The goal is to make the screen reader think there is text and at the same time hide it from a sited user. To do this we will be using a context specific element and negative margins. For example, consider the following CSS:

    #banner {
    width: 758px; /* The width as understood by IE browsers & width of desired content area */
    border: 1px solid gray;
    padding: 0px;
    margin: 0px;
    height: 125px;
    background: url('image file with extension') no-repeat top left;
    }

    * html div #banner { /* This is the Tan hack */
    width: 760px;
    w\idth: 758px;
    }

    #banner p {
    margin-left: -5000px;

    }

    and its related XHTML in the HTML/PHP file:

    <div id="banner">
    <p>The banner for my web page.</p>
    </div>

    A screen reader will read “The banner for my webpage,” but because our CSS code positions the paragraph tag 5000 pixels to the left a sited user will never see it.

  7. Upload the image, header.php, and style.css files to the server via FTP and you will get a box that looks like this:banner with image 758px wide

Leave a Reply

Your email address will not be published. Required fields are marked *