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>

    Ouch.

  • 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

Comments

  1. I don’t even want to think about the 90k+ pages I used to have to rattle out in Notepad, which were just nested, nested, nested, nested tables (company policy!). Ugh. Nightmares still plague me, over five years later.

  2. Oh, sounds familiar… The one odd hack I have used only once is using frameset with one zero height frame just to ged rid of empty scrollbar in Netscape3…

  3. Sounds like we used the exact same tricks. One of my most frequently used tricks was the use of these attributes in the body element : topmargin=”0” leftmargin=”0” marginwidth=”0” marginheight=”0”. This way I was sure my layout was placed in the top left corner of the page.

  4. Bad memories… :-(

    It remains a mystery that tha ‘internets’ didn’t collapse due to band-width abuse. And to think that there still are countless pages being produced daily based on similar ‘guidelines’.

  5. Yeah, same. I guess two line breaks instead of paragraph was very very common mistake. One pixel borders via nested tables, too.

    Also - not necessarily related to web standards , rather to accessiblity/usability - using patterns in background (same small image repeating).

    Using BMP sometimes as common image format for photos, uff.

  6. …and of course the obvious, using images for navigation options, then using JavaScript to swap the image on mouse over. 20-30 images loading on every page, just to display text! Madness.

    Thanks for the chance to air our sins Roger.

  7. Ha, I remember that ‘form inside table’ trick too.

    Occasionally when I couldn’t be bothered with nesting all those tables, I would resort to nested framesets instead… and feel proud that I was separating all my page sections into their own files for easier maintenance!

  8. I’m still seeing the form inside table hack in the long-in-the-tooth web application I’m working on right now :-(

    I used frames once.

  9. I think the worst thing I ever did was writing a site using the IE specific dynamic tables (remember those? You could load a CSV file and use it on a per line basis on the client side, but only in IE).

    Oh, and my first ever page had a Javascript background colour changing drop down on it. I was young. That is my only defence.

  10. Hehe, I kinda skipped all of that, since I am still “young” in this craft.

    As far as I remember I have made only one table based layout which didn’t even go live. I have done a “no layout at all” layout in frontpage in 2000 for my first site hosted on geocities (it was called “justonesucks”). Really funny when I get to think of it.

  11. Oh… is this confession day? I’m guilty of a lot of the hacks you mention Roger. And the margin-stuff Veerle mentions. And of course I was a cool JS-fantom creating all those neat roll-overs! I remember being a bit proud when I made a site where a hover changed two different images on the page at the same time. Wow. Though I’m proud to say I managed to stay away from frames, hehe.

    You live, you learn. I think we should be proud of having survived the old days, and now having a lot of experience to use in educating the next generation, preventing them from going in the wrong direction. Of course, that’s what you’re actively doing here, Roger :-)

  12. Ah, nostalgia time!

    I remember the ages spent perfecting liquid table layouts (the trick in those days being to specify width on the cells, not the entire table), including painful cross browser testing where column-spanning cells wreaked havock, and much reliance on my trusty calculator to get all the cell widths just so. Naturally the trusty 1x1 spacer gif was by best friend ;-)

    In these hand-coding days it’s also easy to forgot what a god-send Dreamweaver was for building and maintaining complex table layouts. I remember seeing an early Macromedia demo when they were just launching DW3 and thinking my life would never be the same again! To be fair I’m now loving DW8 - it’s not only a pretty decent code editor but when it comes to production work on a big site it pastes in stuff from Word a treat, complete with lovely semantic markup.

    Of course our shame is nothing to Dave Siegels - “The Web is Ruined and I Ruined it” from 1997 no less.

    Seriously guys, though, don’t beat yourselves up. When IE4 was the best thing in town, and NN4 was more popular than Firefox, you simply couldn’t code pure standards and expect to get paid.

  13. ps: I’d missed The Great WYSIWYG debate when I wrote the above, so please let’s not restart the Dreamweaver debate here (sorry!).

  14. Hehehe. I’ve just remembered a ‘special’ workaround I used to do to control spacing across all browsers at the time:

    Two line breaks with style=”line-height:’X’px” set on the second.

    creepy… :)

  15. It looks like I will be the first one to acutally show the crowd one of these notorious hack-tables-sites…
    I wouldn’t call this muddle of letters code, there more like modern art :)
    FFIX Sverige version 1.0

    Just for an exampel:

    <table border="2" bordercolor="lightblue" width="600" cellpadding="0" cellspacing="0"><br />
    <td bgcolor="black"><br />
    <font size="1"><font face="VERDANA"><br />
    <table width="600" border="2" bordercolor="white" cellpadding="5" cellspacing="5"><br />
    <td colspan="2" bgcolor="black"><br />
    <font size="1"><font face="VERDANA"> <br />
    <img src="h.jpg" align="left"><br />
    text text text text
    
  16. Okey, lets try again?

    Just for an exampel:

    <table border=”2” bordercolor=”lightblue” width=”600” cellpadding=”0” cellspacing=”0”>
    <td bgcolor=”black”>
    <font size=”1”><font face=”VERDANA”>
    <table width=”600” border=”2” bordercolor=”white” cellpadding=”5” cellspacing=”5”>
    <td colspan=”2” bgcolor=”black”>
    <font size=”1”><font face=”VERDANA”>
    <img src=”h.jpg” align=”left”>
    text text text text

  17. I have my 1999 mistakes still archived/live in my root directory (as a reminder).

  18. This is quite therapeutic. In the past I’ve been guilty of most of the mark-up felonies listed thus far, but there is one particular piece of twisted genius that deserves mention, as it left me speechless even during those heady days of nested tables.

    One of my predecessors on a project had used nested frames in exactly the same way as most people were using tables. Seven or eight levels deep at times, hundreds of separate documents that needed to be opened and picked through every time you wanted to update a page.

    I wonder what he’s doing now…

  19. All the hacks that people described above plus frames, image maps, and javascript image rollover code EVERYWHERE. Also, not a single heading tag to be found. Good times.

  20. November 21, 2005 by Martin Smales

    # 18 gets my vote for worst hack! shudders :)

    My worst crime against HTML was having images representing all text. Again, no text, just images. Comprehende?

  21. November 21, 2005 by gerben

    thank god I missed all that. I kind of stumbled right into CSS and fell in love with it.

    Still made some beginners mistakes (probably still do) like unsemantical classnames, overuse of hacks, trying to make it work in IE before testing other browsers ETC.

  22. November 21, 2005 by David Owens

    Do want to know what makes me cry about all of this? I have just handed over a project to a client who has had their designer rebuild the site using most of these hacks. On Thursday night it was super-fast, semantically sound and standards compliant. By Sunday morning it had been replaced with tables and javascript rollovers. class=”header”, anybody?

  23. consider that more than 90% of all web sites code on the net is written with these hacks(as i understood from the previous article - well -comments to it) im not wondering. But worse thing is that new webs being built with tables and such.

  24. I have to confess, I’m guilty of committing the sin in #18. I didn’t even know enough at the time to set the various margin attributes in the body tag, and I really wanted my design to be flush with the edges of the browser window.

    I used JavaScript’s document.write functionality to “include” other chunks of code, a la PHP include files. I was quite proud of that particular trick at the time.

    And I have been responsible for so many JavaScript mouseovers, it’s not even funny. And I’m sure many of them used browser detection, not object detection.

  25. Unfortunatly, I’ve committed some of those crimes as recently as 2 months ago. I’m getting help, though. Each site that I develop is slightly cleaner than the last.

    Hi, my name is Jeff, and I’m an HTML hack. I’ve been clean for 2 months.

  26. Who can forget David Siegel and the Single Pixel GIF?

    David even showed me how to tie my shoes.

  27. I remember using width=”99%” in table columns to make sure my fixed width column stayed that width and didn’t get any wider if there was little content in the main bit of the table…oh and those 1 pixel borders :)

  28. Way back in 1995 when I got my first professional gig converting thousands of pages of Framemaker documents into HTML for Sun Microsystems, I learned early on to use headings and lists to create the proper document structure. Quite frankly it was the best way to “style” technical documents. That and the fact that my contact at Sun, good bless him, slapped my hand hard whenever I tried to incorporate anything “non-standard”, including overuse of the <font> element. Back then, I was just happy to have browser support for tables so I could use them to represent tabular data! Even though it meant I had to code some pretty complex data tables painstakingly by hand.

    With that said, I think one of my most loved hacks was using <blockquote> to indent anything from paragraphs of text to tables. Multi-level nested <blockquote>’s were my equivalent to muti-level nested tables.

  29. November 21, 2005 by Rounin

    Two words: FrontPage Themes

    Yes, I admit it. shamefully hangs head

  30. November 21, 2005 by nate klaiber

    wow, these are all excellent examples. haha. I must say, I have been guilty of using pretty much all of the above at one point or another. Now, I CRINGE at the sight of any of those things. Using tables for layout, borders, line break tags, image rollovers.

    unfortunately, I cant escape it all. I am working on a site with someone right now who is a ‘web designer’ but has NO clue whatsoever about web development, standards, etc. Ugh.

    Thank goodness we have all learned from our past - I imagine 10 years down the road we will laugh at a few of the things we do now. hehe.

  31. I used most of these! It’s like going to Memory Lane in a handbasket.

    How about CyberStudio/GoLive 4 generating 380K worth of pixel-perfect sliced images (including 80K for [static, onMouseover and onClick] rollovers and one very large body background:fixed image) for each page and several hundred lines of JavaScript embedded on each page. Of course, [INSERT PROFESSIONAL PRIDE TONE HERE] there were - Usually - ten different Catagory designs with their own sets of images.

    My favorite hack? An “image preload” function set on every page for the various background and rollover images.

    It was so miraculous that a spacer image could be used over and over and over….

    Ah, Nostalgia.

  32. I used to proudly advocate avoiding the use of quotes in your attribute values, not bothering to use closing element tags, all sorts of nonsense aimed at making the size of your markup smaller. After all, if the browser doesn’t care, why should you, right? Sigh, the old days are gone, thankfully!

  33. grinning madly ….yes - I used to use all of those - especially the line breaks one…I did that until I went blind! (mumbles) “Now, if I do ten more line breaks on the page that should add all the space I need!” (cringes)

    I’m clapping at your first one on the list actually: controlling table borders with ‘border=0’…I used that right up until I started learning about web standards and I remember thinking I was so clever for having used it at all (what a dork!) I have to say I always used the doctype though…right from the very start…and the first book I ever learned HTML from was by Molly (I memorized it from cover-to-cover, I’m not even sure how much of it would be valid today as she wrote it before she was even in Web Standards!) :)

    Ahhhhh….good memories! Then, like those flashback scenes in the Terminator movies….it’s back to the present day!

  34. Matthew: Framesets…Frames…you have balls to admit that man!! :D

    I try and hide that fact with all the other skeletons in the cupboard (or closet for those American readers of this site). Hmmm….alright I admit it: I did the same thing (and I know I’m going to web-standards hell for it!)

  35. November 21, 2005 by Marc Luzietti

    I think my worst sin was simply nested tables.

    Back in ‘96 I thought I was so clever when looking at a demonstration on Dave Seigel’s website which used tables to control text width and realizing it could be used to make multiple columns of text. I used to think of him as my guru, as I’m sure many did.

    As for ruining the web, I think not. Maybe we had to hack our way through the wilderness, but if we hadn’t, how many of us would have jobs today? The web might still be a backwater if we hadn’t used whatever tricks we had to in order to get it to do what we wanted. We might all be using gopher or Archie today instead. ;-)

  36. November 21, 2005 by Roger Johansson (Author comment)

    Jon: Argh. That David Siegel stuff is evil (well, not evil, but you know what I mean)! I’d forgotten about him and his books. Probably because I never read them ;-p.

    Ah, frames. I’ve done that too. It felt so clever at the time. And the massive amounts of JavaScript needed to keep the frames in sync as the visitor moved through the site… what, provide a fallback for JavaScript off? Huh?

    Nobody has mentioned Java applets yet. Come on, there’s got to be someone still alive who used Java applets.

  37. November 21, 2005 by o-juice

    Oh my, guilty as charged…I did just about every single thing mentioned in the entry and subsequent comments.

    Practically the full extent of CSS I used was predominantly Internet Explorer oriented: from making the scrollbar different colours to adding shadow effects to text.

    I even made…”splash” screens that would show some garish logo to preface the pop-up that would be the “site”. My way of forcing users’ viewport to conform to a specific width and height.

    I’m very ashamed. :-(

  38. I may have you all beat. I made a page when I was starting out around 1999 that was just one gigantic server side image map.

  39. Rounin, don’t feel bad… we all had to start somewhere and FrontPage might have seemed like a good idea at the time.

    Roger: FrontPage themes may very well be the Java applet answer you’re looking for… remember how they used to implement rollovers by embedding a series of Java applets? Nothing like waiting 300 seconds for a page to load just to see your button turn yellow on mouseover.

    I’m shocked nobody has mentioned the egregious use of the “nbsp” entity as a formatting tool (well paired with excessive line breaks).

    And I also seem to recall using !important 50 times per job, especially on links, to avoid having to figure out selector specificity (not that I had any idea what that meant).

  40. Dang, I don’t feel so bad now. It seems everybody did a bit of bad practice (or a lot…) back in the day.

    During my first year as a web designer (I was just learning!) I used to make all my webpages have black backgrounds so you couldn’t see the incredible amount of mistakes and terrible things that happened because of my clumsy code.

    The dumbest mistake I ever made: I HAND CODED the biggest file ever. It was a series of tables that created a calendar with a separate table for the day and number. It took me FOREVER to complete it. It was stupid…

  41. Well, I do remember one of the guys around doing layout via nbsp - it was made that each row was starting at different point from the left screen - creating kind of half-circle. Nice indeed for that age, when you had just free-flow of text going down.

  42. I think the funniest thing I ever did when I was younger was a few mistakes in one:

    make a whole site in flash (for no reason), that loads about 42 swf files in the background using png files for transparency and stuff. the site ended up being 780 pixels wide. This is not work on 800x600 resolution screens because of the scroll bar, so i made a resolution sniffing javascript to serve it in a no-scrolling popup window for those lucky enough to have 800x600.

    yeah, i could have just made it with html, but that would have been easy…

  43. November 22, 2005 by Michael McCorry

    Guilty as charged for nearly all of the above, but there’s one guilty sin that keeps coming back to haunt me. Many, many years ago, I used to love the hell out of splash screens. “It’s like the front cover of a book!” I’d tell my clients. “It’s a great way to greet your visitors, insted of showing them a bunch of text”. I’d preach it until the cows come home, and now have to explain to clients that their Google PageRank sucks because of the splash page. Even worse were the splash pages with a Flash intro, containing the only link to the rest of the site. What a n00b.

  44. Using 1 px frames with hidden form fields and a whole lot of JavaScript so that you can manage persistance of information between pages on the client side. That one was mean-ass!

    DHTML menus that worked using arrays to hold data about the menu items and their links was another sucka. Want it to be multi-level? I’ve got the script for that - just give me the array!

  45. Forgot to mention: all tags and attributes in caps. I thought it was easier to read.

    And no quotes for attribute values. It always used to mess up my JavaScript anyway.

  46. November 22, 2005 by Ander Aznar

    I used Java applets. Yes, it was me. Take me to jail now if you think I deserve it.

    To make things worse, I think I’ve made every single mistake people have mentioned.

    It’s clear I won’t go to internet heaven. :)

  47. November 22, 2005 by Martin Smales

    Use of frames and annoying Flash intros, which you cannot skip even if you wanted to.

    Thankfully, I always hated applets from the very start!

    And not to mention excessive use of proprietary code to keep only IE happy, and calling every site I make as “optimized for IE 800 x 600”.

  48. For me it was the usual suspects: “Siegel Pixel GIFs” (guffaw!), nested tables ad nauseam, embedded style … and many other vices that I have since (happily) cast away.

  49. I was promoting not using quotes around attribute values.

  50. Don’t forget lack of content-type character encoding. :)

  51. I remember creating a super-nested-table site with a sliced-graphic, javascript-rollover navigation system. I’m sure the tables used lots of 100%/* width hacks.

    All font tags, too; no CSS or semantic markup. I doubt it had a doctype or encoding, but I don’t recall for sure.

    To really cap it, despite being an educational resource; the client insisted on adding incidental animations. While they were quite cute, it would have been the end of concentration for any kids with an attention defecit.

    Thankfully I learned the error of my ways… as did the guy who showed me how to build the nested table setup :)

  52. I remember making bulleted lists like this:

    &middot; Item 1<br> &middot; Item 2<br> &middot; Item 3

  53. I remember making a website completely out of table “background color tiles”.

    Example of a page that I used to code with background-color “tiles” or “cells” with minuscule widths and heights to achieve whatever I had in mind…(only worked in IE at the time [version 5.0 and up, by the way])

    <table cellpadding="0" cellspacing-="0" border="0" width="36">
    <tr>
    <td width="1" bgcolor="#00FF00"></td>
    <td width="1" Bgcolor="#00FF01"></td>
    <td width="1" bgcolor="#00FF02"></td>
    
    <td width="30" bgcolor="#000000">Text went here</td>
    
    <td width="1" bgcolor="#00FF02"></td>
    <td width="1" bgcolor="#00FF00"></td>
    <td width="1" Bgcolor="#00FF01"></td>
    </tr>
    </table>
    

    The result was a nice 3 pixel border on each side of the text…

    Then I usually had a full width table on top and bottom of that to make it look like it was all boxed in and neat.

    Then I started using images instead..

    Now I use the simple CSS border property. Can’t go wrong. :)

    NOTE: My website re-opens in summer 2006. I have created over 1000 images before I achieved it’s look. ( those images will be showcased on the site also :) )

  54. Matthew Pettitt: Yes I do, infact the “boss” at my old job was allways harping on about how they were so good and how he could build a whole content system around it … oh dear

  55. @Sam Hastings

    Same here! Oh, so many memories.

  56. November 23, 2005 by Rich Acosta

    All I can say for myself is: Yahoo! PageBuilder. I feel so ashamed.

  57. brings a tear to my eye,

    I did most of these things, and most of the things in the comments too..

    /me wipes away tear

  58. November 24, 2005 by o-juice

    I’ve got another sin to confess. I used to position content to fit in the centre of the page vertically and horizontally with the following code:

    
    <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td width="100%" height="100%" valign="center" align="center">
          _content..._</td>
      </tr>
    </table>
    

    Well, if there’s one thing I’ve stuck with since I started back in the day that I’m glad about, it’s hand-coding.

    I had a very brief stint with DreamWeaver, but ended up hating it for a lot of things but specifically for inserting clumps of these — <p>&nbsp</p> — just about everywhere it could. I’d just have to look at the Enter key on my keyboard and it would appear in my code!

  59. My name is Johan, and i used the marquee tag…

    …just seven months ago (sigh…)

  60. Dear God. shakes head

    Yep. I’m guilty of using pretty much all of the above mentioned hacks (except spacer images, kinda…and nested frames), especially the FORM tag hack.

    In addition to that, I put hidden input tags right alongside the form tags outside of the table cells.

    But the worst was my version of colored table borders. I would create table cells with a width or height of 1px and put a transparent 1x1 gif inside of it to create the afformentioned borders. hangs head in shame

  61. November 25, 2005 by GrumpySimon

    mmm… remember that cool java applet which made the title image reflect in a pool of water…?

    That, and the use of FrontPage seriously embarrasses me these days :)

  62. well, I have to confess that I sometimes still fall back to that chunky table-based layout design, mostly when the shitload called Internet Exploiter treats too much on my nerves :D

    cu, w0lf.

  63. Back in 1998, I learned a trick using Dreamweaver (v1.2) that could make html/images move by placing them in “Layers” and “Timelines”. And used onMouseOver + onMouseUp “behaviours” to create an illusion as though the site is Flash. I was so proud, until I realised it actually took TWICE as much time to load compared.

    I revisited my old site (it’s still alive thanks to geocities), it doesn’t do the “magic” anymore with Firefox or Safari. hehe, dang.

  64. Oh my, I confess to… <<center>hello<</center> tags, animating the content of the status bar, the title bar, the 100x100px window popups to spawn midi files…

    The “splash” screen, the “Best viewed with [browser] at [xDim x yDim]…” etc. <<font size=”-1”><<sup>TM<</sup><</font>

    But the worst, of all time, was coding for MSIE. I will never make that mistake again! If it works in Moz, Firefox, Safari, Konq, & Opera, and follows Web Standards, then I don’t care if it looks like junk in IE.

  65. I too used the table in a table border trick. I’ve been on the web since the FONT tag and I’ve been guilty of using a lot of junk markup.

    target=”new” was my biggest sin. I was a hostile New Window opener for a long time and thought the Back Button crowd were weird.

    I get it now. Have for a long time. I was also a pop-up fan. My personal photo site still uses javascript pop-ups. ahem. But they’re real links not pseudo links. Still, it’s time for a change. Long live the back button.

    These days I’m a markup freak and if I see lists made of link-break link-break I twitch uncontrollably. A list is a list is a list.

    I’m working on a recode of a sales site. Every headline used to be a P style=largeredtype B I and some were P style=largeredtype B I U. Now they are all lower case hn tags. It was ugly.

  66. November 28, 2005 by Ander Aznar

    I had forgoten the image-map navigations. Aaaargh! I did one or two, with way too many polygonal shaped mappings.

  67. Party like it’s 1999 folks!

    Och, the nbsp, imagemaps (boy was I lucky I found a tool to do them for me!) and uber-center of conter pages…mmmm topmargin & what not on body tags!

    Hehe, and how proud I was of my rowspan & colspan One True Table layouts. Never really nested :)

    What I do miss is the * you could use in your frames to give an auto fill-up width to a frame. CSS needs that.

  68. You can confidently assume that I was one of the world’s greatest table-based designers… Hey! We all were. You see I started on the Web with MS’s Frontpage and Internet Explorer which I used until that one day when I forked out the cash for Dreamweaver. Then Firebird (now Firefox) came along. I made that switch to this CSS thingy due what Cederholm and Zeldman were saying on their blogs (I am a great follower as well as a leader) and haven’t looked back since.

    This was until I had a redesign project to do and had drawn a complete blank on the whole concept of table based design. Don’t worry I figured it out, but you must ask yourself, “What were we all thinking?”

  69. November 30, 2005 by Anonymous Coward

    Well, I remember doing scrolling status bars, rollovers, splash pages, and font tags all over the place. The worst thing is, I maintain some sites from the 90s, and they still have br, nonbreaking spaces imagemaps, tables, and unquoted attribute varibles. Amazing thing is the sites all work still. One even won an award last year. The shame!

    Posted anonymously for obvious reasons.

  70. December 1, 2005 by Casual Developer

    I tried using frames because it was the ‘in thing’, but I linked to my homepage and it opened the entire frameset in the inner frame … I didn’t bother with them anymore after that, LOL! Couldn’t be ar5ed trying to figure that one out, nested tables made soo much more sense.

    Errs: Nested tables,   absolutely everywhere, line breaks to your hearts content, MM_variables everywhere in my javascript for rollovers, scrolling status bar, image maps … yeah baby! (Austin Powers). I’m not really in the business long enough to have used some of the older hacks mentioned, phew! (I stem from a s/w bg).

    On the up, nearly sussed liquid layouts and css rollovers … but not 100% there yet. Keen interest in accessibility these days.

  71. 64. 2005-11-25, 15.07 by Steve

    Its a darn good thing you don’t work for me, as your blatant disregard would alienate 90% of our user base.

    How can you get away with NOT coding for IE? Just becuase YOU enjoy web standards browsers, doesn’t mean your audience does?

  72. Oh, and one of my hacks that I haven’t seen here is to use a -1% td width to get the 1px border for MAC IE.

  73. I was just thinking about my first web sites the other day. At the time, I worked for an ad agency and they had a client that wanted a web site. Now, mind you, we had never done one before. The client wanted Flash AND Quicktime. The AE said,”Sure we can do that!”

    It was awful. I remember doing all of the text as graphics in Fireworks and I think I put that in Flash. I didn’t have a clue as to building a site to fit a minumum resolution. The Flash files wound up being to large to fit in the window so I set them to be 84%, in the HTML.

    Oh, and I can’t forget doing a site with a dpi of 150 entirely in Fireworks (text AND graphics). What can I say, I was a print designer thrown into the fire. Man, I am glad those sites are not around anymore.

  74. A lot of those were mine two, and i remember just one more from the FrontPage, that was to make nice buttons making use of the nasty classes from java, man i was adicted to that but anyway clients love them.

  75. December 6, 2005 by stmind

    I’ve enjoyed reading this. I don’t feel bad about using many of these methods once upon a time; when you’re coding to an audience you write code the audience’s browsers can deal with. In 99, and even still today, virtuously following ‘standards’ does not necessarily get you a functional site. Moreso now than then, but even so, until browser support of standards is closer to 100%, many will still advocate some level of table-based layout, as in certain circumstances it’s simply what works.

    Anyway, I will share this: In a past life I have actually written perl that analyzed an article’s length and split its content across multiple table columns when generating the page, for a semi-even appearance. It worked nicely (Yuck) This same site used image rollovers for both the navigation buttons AND the summary text for each button. (Whee!)

  76. There is no dirty hack I didn’t use, and I’m sure I came up with some all on my own. It was horrible.

    Then came CSS, and I was so inept I managed to crash Netscape 4 on pageload. Ouch.

    If I can learn, anyone can. There’s no excuse.

  77. I was most proud of my clear-gif “foundation row,” used to control table columns’ widths without using width=”n”. I was too sick of constantly adding/adjusting the widths of each affected td cell.

    <pre>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
        <td>(real content in here)</td>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
      </tr>
      <tr>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
        <td><img src="z.gif" width="20" height="1" alt=""></td>
        <td><img src="z.gif" width="298" height="1" alt=""></td>
        <td><img src="z.gif" width="20" height="1" alt=""></td>
        <td><img src="z.gif" width="1" height="1" alt=""></td>
      </tr>
    </table>
    </pre>
    
  78. December 11, 2005 by Shaun W. Becker

    I can remember using notepad, and how frustrating it was to define hot spots. Save AS “blah.html”, view the page, then back to the drawing board. I guess i was only nine (not a valid excuse), but the fact is its people like us who pioneer the web, its people like us that creat new languages and keep the web advancing. Im 17 now but i still dont mind editing source in the only program i knew in my heart was “Old School.” Thank You for your hard work, and hours of troubleshooting.

  79. Hi, I still remember when browsers didn’t supported tables. Being wowed finding out you could make a left menu with images in the table and a background in declared in the body. CSS was not heard off… many sites have gone through a big evolution since. I love to browse for my old favourite sites in the waybackmachine : http://www.archive.org (I’m not affiliated to it, just a fan)

    One of the memories I have is the chase for that line break that screwed up the layout in IE. Trimming all the HTML to a single line… yup maintenance was fun…

  80. I once put a lot of content, including paragraphs and headers in a span-tag. I had been pulling my hair for a long time and for some reason MSIE 5.0 did not work as expected when I used a DIV. The span-tag fixed it and I’ve no idea why.

    Roger speaks of his first use of CSS to control fonts only. There a a gazillion of sites produced even today that limit their use of CSS to this. I’ve got a habit of pushing CTRL+SHIFT+S (Disable all styles in the Web Developer Toolbar) and it’s absolutely horrendous how often one still sees all these nested tables, etc.

  81. January 17, 2006 by Paul Bennett

    Easy:

    Javascript browser sniffing and two COMPLTETELY SEPERATE site versions - one for IE, one for ‘everything else’.

    That site was invisible to search engines, baby ;)

  82. Guilty of all of the above. But back then, so was everyone else! And you had to, in order to push things. My favourite hack (for one of the first sites I did in ‘96) was to use pre tags and blankspace to indent text and images. Blech. And the corporate site had (we were a ‘multimedia company’ after all!) a 1.5 MB quicktime plumped on the homepage!

  83. Ok, that come out a bit wobbly. What’s with the backward parsing of html brackets?

    Take two:

    Guilty of all of the above. But back then, so was everyone else! And you had to, in order to push things. My favourite hack (for one of the first sites I did in ‘96) was to use PRE tags and blankspace to indent text and images. Blech. And the corporate site had (we were a ‘multimedia company’ after all!) a 1.5 MB quicktime plumped on the homepage!

  84. When you study you make a lot of mistakes. Everyone does. It’s nothing to be ashamed of. It’s the only way to learn something.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.