Tables Anonymous

May 13, 2008

Hi, my name is Gene and I use table layouts. I really want to use CSS for positional layout, I really really do. And every few years I look at the various sites I manage and think to myself, Gene, today is the day you replace all this hacky table garbage with nice, clean, browser-independent CSS.

So I scrap the tables and it feels good, like getting rid of accumulated crud always feels. And I start styling. Now, I am by no means a CSS expert and I look up a lot of stuff online and in books, but I now know enough to get around basic grid-like layouts and have figured out the positional properties more or less. And I’m not really doing anything fancy. So, initial progress tends to be quick and in an hour or two I have a pretty sharp, pure-CSS layout working in my test browser (currently Safari).

Encouraged and emboldened I start testing a couple of other browsers that I’d like to support, like IE6 and 7 and Firefox. I notice a few display discrepancies and here is the TSN turning point. This is the exact point at which my CSS journey becomes a death-spiral into whack-a-mole layout hell. I spend 3, 4, 5 hours madly swapping between test browsers trying to figure out why fixing one breaks another ad infinitum.

First I get creative, trying various tricks of cascading styles and divs so that every browser gets fed the kibble they like best. At this point I’m still clinging to the hope that I don’t have to use any browser detection nonsense. And for a while it looks like I’m making progress. But inevitably, every single time, one browser will have an unexplained white space between elements that are supposed to be flush or something will wrap where it’s obviously not supposed to wrap. After creativity comes desperation and I start madly trolling the Internet for all kinds of crazy (I’ll say it again: crazy) hacks that people use to work around the various browser idiosyncrasies. JavaScript expression syntax, even (OMG I can’t believe this exists) conditional JavaScript compilation, and by this point it’s about 3:00 AM and I start to ask myself the following question:

How is this horrid, ugly, hack of a CSS layout any more elegant than my original table layout?

Obviously is isn’t, so I roll back all my changes and call it a night. Maybe next year things will be different. Maybe by then Microsoft, Apple and the Mozilla foundation will all get together over beers and settle this crap once and for all. And maybe, just maybe, CSS will become as reliable and consistently rendered as my 5+ year old table layout has been. Maybe I’ll learn the magic secret of browser-independent CSS and will laugh at the problems I’m facing now. But I doubt it. Say what you will about CSS vs. tables. At least tables work.