Table Cells vs. CSS Boxes

by Joe Gillespie — Oct 1, 2002

This diagrams show the basic structure of a single table cell (left) and how it relates to a CSS box (right). Now for the first 'gotcha'! The official W3C specifications require that the padding area goes outside the width and height. This is the major difference between a CSS box and a table cell where the padding goes inside the cell dimensions. In fact, it confused Microsoft so much that in Internet Explorer, they have put the padding on the inside and every other browser - Mozilla, Netscape, Opera etc have done it the 'correct' way. If you are specifying your box widths in terms of percentages, it doesn't matter so much, but if you are using pixels, and are expecting a particular result, you can expect some 'surprises'. You really do need to check your pages in all the browsers - but you do that anyway, don't you?

The Microsoft Internet Explorer box includes the padding in the box width like a table cell, but it shouldn't!

iebox

When you specify a box width in pixels, that's what you get. If you don't specify a height, the box expands downwards to fit around the contents. If you do specify a box height and the text needs more room than you have specified, you get into an 'overflow' situation and have to decide how you are going to handle it. Left to their own devices, the browsers won't necessarily do what you expect. The options you have are; to stretch to fit - overflow: visible, clip the contents - overflow: hidden or to become a scrolling text box - overflow: scroll.

All the examples this month use fairly ordinary grids and could be constructed using tables. In fact, if you are at all concerned about older browsers, they probably should be. Netscape 4.x will mess-up your box layouts to a state where they look nasty at best and could become totally unreadable.

Set up the style definitions for your boxes in the style sheet, either in the page <head> section or in an externally linked style sheet. External style sheets are invaluable when you have a number of pages on a site that need to share the same styles. You only need the one style sheet and any changes you make to it are reflected throughout the site.

Internal style sheet

<style type="text/css" media="screen">
... style definitions go here...
</style>

Externally linked style sheet

<link type="text/css" href="mystyles.css" rel="stylesheet" media="screen">

Before we do anything, the overall 'body' style should be defined. This gives the page its overall look and behavior. I'll keep it very simple to begin with.

body
    {
      color:black;
      background-color:white;
      margin:0px>
     }

Giving a white page with black text and no margins, all other elements will fit up tight against the browser’s edges.

If you are using an editor that automatically inserts a HTML <body> tag along with some predefined attributes, the CSS body style rule takes precedence. It has two parts. The word 'body' is called the 'selector' and the parts after that inside the curly brackets are called the 'properties'. Properties are separated by semi-colons and can go all on one line, or on separate lines, it doesn't matter.

At this point, I should explain that <body> and its closing </body> are HTML tags inside which all the content of your page appears. 'body' as a CSS selector, defines the 'styles' for anything within the body tags.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float