Tech Note: Tabular Exorcism

Science | Sun, Oct 5, 2008 at 2:30:23 pm PDT

The latest change behind the scenes is huge, but hopefully you won’t even notice.

Ever since LGF began, back in the Paleostinky Era, our main template has been based around a simple HTML table with three columns. No nested tables (gasp!) or anything like that, but in the world of web wonks, this kind of table-based design is akin to walking around with a piece of spinach stuck between your front teeth.

So at long last we’ve ditched the tables, flossed our web choppers, and deployed a modified version of the three column floated layout described in this excellent book: CSS Mastery: Advanced Web Standards Solutions: Andy Budd, Simon Collison, Cameron Moll.

There may still be some bugs to work out, but the worst of them have been crushed. The layout looks the same in Internet Explorer 6 and 7, Safari 3, and Firefox 3.

One big advantage is the increased accessibility. Using this sort of floated layout allows us to have the main content column actually appear first in the source listing, before the left and right sidebars; this means that visitors with impaired vision who use screen readers no longer have to wade through the whole left sidebar just to get to the real stuff.

There’s one area left in the template that still uses a table: the navigation panels that appear at the top and bottom of the middle column. But that’s due for an exorcism too.

UPDATE at 10/5/08 6:24:16 pm:

Main template exorcism completed, and I didn’t even need to call in Bobby Jindal (sorry, couldn’t resist). The navigation panels now use an unordered list, with everything floated, including the opening <ul> tag, which keeps all the floated <li>s from overflowing their containers. Because we all know how painful that can be.

And that leaves us with one more area of table abuse: the top line of each comment, with the commenter’s information, rating buttons, etc.