Site sections

Tables to full CSS - A case study

Russ Weakley
09-Apr-03

Background

This artilce was written in 2003 and the relevant website has since been updated.

The HHMC site (designed and built by us) was two years old, and while fully valid, it used tables for layout:

The client wanted to do a major upgrade on the content, and was interested in changing the design to a fluid layout. I thought it would be a good time to go full CSS. The brief became:

Here is the finished site.

Dotted lines issues

The biggest issue was maintaining the dotted lines. Both Win/IE and Mac/Safari render CSS-driven dotted borders as dashes. The client and I agreed that this would have ruined the design.

The work-around involved using tiny images as background images within relevant CSS div's positioned using the x and y axis as needed. This meant that there were no dotted lines needed within the pages actual code. When the css is not present, the page looks virtually raw (virtually no images) but is still semantically correct. This means the content could easily be consumed by other sources in the future.

There was only one work around (not a hack) used in the site - a double nesting of the main content block. The two content div's each had a background image - one for the left edge and one for the right edge.

This was a unique problem - those dots! In most cases double nesting would not be needed .

Fluid layout issues

Like all CS-driven fluid layouts there are some rendering issues. If the page is in an extremely wide browser window, and the content is very short, the left nav dotted line is longer than the right edge dotted line. Not a big deal, but this would not have happened if it had been tables.

Source ordering

The page source is ordered with content first, right nav second and left nav last - for screen readers.

Tables within content

There was one content based table in the site. As it wasn't really a data table (and it was extremely basic) I changed to div's. The contact page and form page (new to this version of the site - and still without an action) use a span set to "display: block" to hold the content in blocks on the page:

Netscape 4 issues

In Netscape 4+ the site renders acceptably (all content is visibly and accessible), but without any of the sophistication of modern browser renderings. There are no dotted lines and the left nav is a simple list. The right nav drops below the left nav, so the banner-ads sit under the navigation links.

The client was happy with this result. Better than raw content on the page. And still laid-out in some semblance of the real layout.

Print CSS

The print CSS takes out the left and right column, and changes the content to print in black and white only (except for the header image). Font sizes are in points rather than relative or pixels.

In the past I have used a hidden H1 (set to display: none in the main css file) within a graphic header block so that it can be turned on for very old browsers and printers, but I decided not to do this for the HHMC site.

Code version

The site uses valid HTML 4.01 transitional rather than XHTML 1.0, as the client edits some page code himself and HTML is more forgiving that XHTML.

Page size

Time

The overall template took about 5 hours to build but this was mainly due to experiments in getting the dots to work.

As the site was Dreamweaver run, I was able to edit all the existing templates with this master CSS driven page and apply the templates across the site. This took about an hour - mainly because I overwrote the breakout navigations for each section by mistake : )

So... About 6 hours from start to finish.