The 'No Tears' approach

by Joe Gillespie — May 1, 2002

Since I started using style sheets on WPDFD three years ago, I have used a 'safe' method which uses tables for positioning and CSS for specifying the text within the table cells. Note the emphasis on 'the text'. I do not use CSS 'element' declarations for body, headings, paragraphs, tables etc. because they can, and do, go horribly wrong in certain browsers.

As the site has evolved over a period of nearly five and half years and now has several hundred pages archived, the idea of going back and doing them all again using pure CSS2 has little appeal and would mean virtually starting from scratch.

My browser stats for March show an incredible 5839 'Total User Agents'. That means 5839 different combinations of browsers, browser versions and computer platforms. I have no idea what they all are because my ISP's log analysis program doesn't go into such fine detail. What I will say is that it provides a lot of opportunities for things to go wrong. If there are any serious problems, I certainly haven't heard about them.

This page has a centered table with three fixed-width columns. The first column holds the upright section titles, the second is used for captions and illustrations. Occasionally, when I need a little extra space, I run columns one and two together. The third column contains most of the text.

From a design point of view, I prefer the table to centre on the visible screen width rather than stick tight up against the left hand edge. The table is broken in a couple of places down the page to accommodate banner ads. Along the bottom is a secondary navbar. This element uses a table cell background image which is not allowed by the W3C validator in HTML 4.01 Transitional but then neither is the <embed> tag used for the Flash elements.

Remember, if a browser encounters a tag it doesn't recognise, it is supposed to ignore it. Sometimes you can remove a brick from a wall and the wall will remain standing. Then, there are bricks that you mustn't take away or the wall will fall.

The trick is in knowing which bricks!

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