Reveal your old school web development hacks

The recent talk about hand coding, web professionalism, and general best practices in web development got me thinking about the methods I used to use back before I abandoned table based layouts and started validating my markup.

Yes, I used to create a mess consisting of invalid markup, multiple levels of nested tables, and tons of spacer images. When Netscape 3 and 4 ruled the browser world there really was no other way of creating a decent looking website. And I didn't know any better.

This does feel a little embarrassing, but I think it's important not to hide the fact that many of the standardistas that keep talking about web standards and accessibility have once been guilty of many of the mistakes we now want to see abolished. I wouldn't be surprised if some of the ugly old-skool hacks were invented by the same people who are now trying to make people stop using them.

I've been looking through some documents on coding conventions and recommendations that I wrote years ago. Here are just a few of the hacks I found:

  • Controlling table borders: Using the border attribute only lets you control the width of a table's borders. Most of the time I used tables for layout, and removed the border by specifying border=0. But for the times when a border was required, I didn't want that ugly default grey and beveled border. I wanted a one pixel black border around every table cell. And to achieve that effect I used to create a table containing a single cell with a black background, put the table that I wanted to have a border in that cell, and use cellspacing to push the table cells apart and reveal the black background. Nice.

  • Line breaks instead of paragraphs: I found using the paragraph element to separate paragraphs of text would make the distance between paragraphs different across browsers. So instead of using real paragraphs I inserted two line breaks.

  • Interleaving forms with tables: Inserting a form on a page would often break the pixel-perfect design by pushing things around. That was caused by the form's margins, but I didn't know that. So to prevent this I used to insert the form's start and end tags between table rows. Something like this:

    1. <table>
    2. <form>
    3. <tr>
    4. <td>
    5. </td>
    6. </tr>
    7. </form>
    8. </table>


  • No document type declaration: I actively recommended people not to use a doctype declaration. This was before doctype switching, so having a doctype seemed useless. There was no way of passing validation anyway, so why bother.

  • Inline styles for positioning: I can't remember the reason for this one, but I recommended always using inline styles to position an element (or "layer" as we used to call it back then). Probably something about either Netscape or Internet Explorer not understanding positioning otherwise.

  • Using browser sniffing to insert specific CSS: Since I used pt to specify font size back in the day, and points were rendered at different sizes in different browsers and platforms, something had to be done about that. So I used a little bit of JavaScript that detected which browser the visitor was using and then used document.write to load an appropriate CSS file. No JavaScript? Sorry, you don't get any CSS. CSS? Yes, this was in 1998, and I had stopped using font. But specifying fonts was all I used CSS for.

And that's just scratching the surface. I've been guilty of many more markup-horrors through the years, as I'm sure many of you have.

So, care to share your worst crimes against HTML and best practices in web design and development? Come on, don't be ashamed. Bring them all out!

Posted on November 21, 2005 in Web Standards