The one-pixel transparent gif is a throwback to the bad old days of web design—an anachronism that every web designer should know about but should never use. Otherwise known as a spacer gif; an image with fixed dimensions to take up space on a page, thus forcing other elements into their proper position. They can be used stand-alone, but achieve maximum effectiveness when used in table-based layouts where they can function as a minimum width and height constraint inside table cells. This concept is not bad per se, but is the tip of the iceberg of a whole slew of bad practices developed during the browser wars that conspire to prevent the forward progress of web design.

Using a transparent gif is just a passive-aggressive way of saying "give me space!"


Probably the main reason for the rise to prominence of the transparent gif is that early browsers had quite a bit of trouble adhering to width and height attributes in table cells. Why should table cells matter? Well HTML was never intended to support design or layout; tables were just the only tool available at the time that allowed enough control to satisfy graphic designers who were used to things like PostScript and writing on paper! Transparent gifs were just one of the tools available to coerce tables into a Frankenstein's monster of presentational power. Font tags, nested tables, and spacer gifs were just the marketing-driven solution to a dot-com bubble that needed fuel. No one stopped to question whether these were the right tool for the job. Sure, CSS had been specced out in 1996 and 1998, but we needed solutions now, and all this gobbledygook worked in the browsers of the day.

Web Standards

It was all business as usual until 2000 when all the startups went poof, and suddenly $100,000 for a website didn't seem so reasonable anymore. It was at this time that the web standards movement really began to take off. CSS 1 and 2 were starting to see respectable support in all the new browsers, and being able to lay out a complex page without going three levels deep into tables became reality.

Of course these old practices had become the defacto standard, and you still see a sizable population of professional designers using techniques such as the transparent gif. Given that there's a large amount of development around this methodology, it's no wonder that designers are having a hard time making the jump to CSS. Designers using Dreamweaver can continue down this road blissfully indifferent to needless complexity of the code they're creating. Unfortunately most web design does not live in a vacuum anymore. There are databases and applications to integrate, and that means programmers need to slice and dice mockups into dynamic code. This becomes a problem when you can't figure out which <table> goes with which </table> and which of those 100 spacer gifs needs to be included and where.


Don't get me wrong, I'm not a purist along the lines of "thou shalt not use table for layout." I don't scoff at the occasional use of presentational HTML. I won't whine about valign and width attributes in HTML. I'm a pragmatist. Learn CSS, you won't regret it.

If you want to indent text use:

text-indent: 20px

If you want your table cell a certain size:

width: 100px

If you want space in between paragraphs use:

margin-bottom: 20px

Of course there's a learning curve associated with CSS, but it's really the right tool for the right job.