HTML Utopia! Design Websites Without Tables - Parts 1 and 2

Back in Part I of HTML Utopia -- Designing Without Tables, we introduced the idea of using CSS Positioning rather than tables for laying out Websites. In Part 1 we took a fairly discriminatory view of old browsers such as Netscape 4.

Part 2, below, is about solving the old browser problem in a less hostile way. We'll also take a peek at a few techniques.

HTML Utopia - Desigining Without Tables: Part 2

I'm Back

It's been over a year since I wrote my first (and only) article for SitePoint and I thought I should share the experiences I've since had designing without tables.

The response to Part 1 was very positive. Thanks! There were, however, a significant number of readers that did comment that they weren't prepared to give Netscape the bum steer like I suggested.

A simple comment that significantly impacted my future approach to Web design came from Kevin Yank, who asked the question: "What about all the CSS that Netscape 4 can do?"

WaSP -- The Web Standards Project

Back in Part 1, it was the WaSP campaign (via A List Apart) that got me started on this whole utopian trip. Since then I've learnt to strike a balance between the WaSP ideology, and the requirements of my commercially oriented clients.

I guess you could say it's selling out, but let's face it -- our job is to satisfy our clients to the full extent of our abilities. I decided to look for ways to exercise my new passion for CSS Positioning while still giving Netscape a look-in.

Methods in the Madness

I think I can best illustrate some of the options I explored with some real life case studies. Before I begin, I should let you know that I work as a designer for SitePoint's commercial Web design division, and the case studies I'm about to present are real live sites that I've worked on in my capacity as Web Development Manager for SitePoint.

If that offends you, then don't read on. Otherwise, let's get cracking!

Eyes on Diabetes -- Pure CSS for New Browsers

This design is from the WaSP school of thought --- Pure CSS, and the vanilla treatment for Netscape 4. Check it out in Netscape 4 -- it's surprising how neat and tidy you can make your non-CSS layout look.

Admittedly, a brief like this one is something of a luxury. Accessibility was priority number 1 for www.eyesondiabetes.org.au, and the use of Pure CSS was attractive because of the abstraction of presentation from content.

Here's how the stylesheet is called:

<link type="text/css" media="all" rel="stylesheet"    
href="/includes/persistent.css" />

As I mentioned in Part 1, Netscape doesn't understand either the @import method, or the media="all" attribute. By using either of these in your call to the stylesheet, you can ensure that Netscape won't load it.

SitePoint.com.au -- Pure CSS for All Browsers (even N4)

Editor's Note: A year on from writing this article, we've redesigned www.sitepoint.com.au The site is now very stripped back for Netscape4.

For one of our own sites, SitePoint.com.au, I decided to take Kev's idea to heart and let Netscape 4 have as much CSS as it could handle. Initially I expected that it might manage the fonts and colours, but not much else. What I actually found was that I could get the whole site to work in Netscape using CSS and no tables! The only hitch was that Netscape's interpretation of percentages is pretty bizarre -- this was the main point of contention.

In my first build I simply called two stylesheets --- one of which Netscape skipped:

<link type="text/css" rel="stylesheet"    
href="/includes/basic.css" />    
   
<link type="text/css" media="all" rel="stylesheet"    
href="/includes/advanced.css" />

The basic stylesheet had pixel-based widths and margins locked in to fit an 800x600 resolution. The advanced stylesheet re-declared all those widths as percentages, so the layout spread to 100% of all screen resolutions.

I revisited the site a few months later and opted for a browser detection script instead. This enabled me to split my CSS into three stylesheets: