CSS, Baby!

Volume 7, Issue 46; 19 Mar 2004; last modified 08 Oct 2010

Look ma, no tables!

Sites disappear; others are created. That nasty little railway station, devoid of taste and style, becomes an element of beauty in the landscape which first made it ugly.

Rémy De Gourmont

It’s a dirty little secret that this site uses tables for layout. Well, I suppose if you’ve ever done a “view source,” it’s not much of a secret.

Using tables for layout is wrong. It’s not very accessible, it looks awful if there’s a wide program listing in the content, and it’s basically impossible for clients to change the presentation.

This essay marks my first serious attempt to fix that. It uses CSS instead of tables to produce a layout that’s similar to the layout of the other pages.

The downside, of course, is that you’re going to get something fairly clunky if your user agent doesn’t support CSS. Though, in fact, what you get isn’t all that bad, the content appears first, followed by the various navigation bits (the things that are over there on the right-hand side, if you do have CSS).

The question is, is it acceptable to you, gentle reader, or does it break in too many browsers?

Better Markup

Lauren pointed out that I was using divs everywhere rather than more appropriate markup like h1s. From an accessibility point of view, that’s a bad thing. So I’ve taken steps to fix it.

Comments

Very nice! It looks great in Mozilla 1.5, of course. It's also very nice from w3m-el in Emacs. Thanks.

—Posted by David Smith on 20 Mar 2004 @ 01:31 UTC #

Norm - looks good to me... but then I am a firefox user and firefox seems to have CSS down quite well.

—Posted by Dave Mason on 20 Mar 2004 @ 02:17 UTC #

Mozilla (WinXP/SuSe9): Looks fine. 1 Col style makes the right navbar disappear but the content does not reflow.

Opera (WinXP/SuSe9): Looks ok with the exception that the list items in the right navbar have too much vertical spacing. This is true on other pages as well. Note that Mozilla, Opera and MSIE have different settings for padding/margin for LI element. 1 Col Style makes the right navbar disappear but the content does not reflow.

Konqueror 3.1 (SuSe9): Looks fine except the 1 Col / 2 Col links don't work.

Lynx (WinXP): Looks fine except you might consider the "Skip to Navigation/Skip to Content" invisible links for text based clients. See http://devedge.netscape.com/ for an example.

MSIE 6 (WinXP): Looks fine. 1 Col makes the right navbar disappear and the content *does* reflow.

—Posted by Bob Clary on 20 Mar 2004 @ 04:33 UTC #

Fine in Safari/Mac OS X

—Posted by Rick Thomas on 20 Mar 2004 @ 10:07 UTC #

1-col doesn't reflow in either Safari or OmniWeb on Mac OS X 1.2.8 - but all three are out of date now. Works fine in IE on the same OS. 2-col looks good in all three.

—Posted by Chris Purcell on 20 Mar 2004 @ 02:07 UTC #

In Moz 1.5.0 (Debian GNU/Linux) there is a strange gap between the main body of content and the right-hand navigation elements. The gap runs from the top to the bottom of the page (i.e. the blue top-bar doesn't run all the way across to the navigation elements), and appears to be almost exactly the same width as the navigation elements.

—Posted by Etienne Pollard on 20 Mar 2004 @ 03:20 UTC #

Konqueror 3.2 (Mdk 9.2) Looks fine

—Posted by Remus Pereni on 22 Mar 2004 @ 01:40 UTC #

The new CSS-based pages are way nicer than the table-based ones, in IE on my Pocket PC.

I've noticed that, on the whole, weblogs are among the easiest sites to read on pixel-constrained screens, as they tend to be CSS-based.

—Posted by Martin Kenny on 29 Mar 2004 @ 12:33 UTC #