A Not so Nostalgic Look at Pixel GIF Spacers
If you’re new to web design you’re very lucky. You get to jump right into CSS based layouts. You have the ability to create clean, beautiful code. When I first started learning web design it was just prior to the birth of CSS and long before CSS was used as a layout tool. Back in the old days, complicated layouts were constructed with a web of nested tables and padding and spacing was handled with spacer gifs. The net result was code uglier than Michael Jackson’s nose.
What the heck is a pixel gif spacer?
The pixel gif spacer is to web design what the rusty coat hanger is to back room abortions. It is a tool of utter destruction, likely commissioned by the devil. For those of you lucky enough to bypass this dark period in web development, I will quickly explain what gif spacers were used for. Basically, before CSS layouts, there was no way other than uniform cellpadding and cellspacing to build padding into a design. If you wanted 10 pixels of padding between a column and text you had stretch a transparent spacer gif to create that space. The picture in the top right of this post uses dotted lines to show where table and nested table borders would likely appear and the red lines show stretched pixel gif spacers being used to create padding.
Was it really that bad?
In this old style of web development the net result was incredibly bloated and messy code. Many sites were very complicated and poorly planned. If you needed to add a line of code, a good portion of the layout needed to be reconstructed. To make layouts even remotely flexible you had to rely on a huge web of nested tables. On many of these sites, adding even a single line of text would cause the layout to explode apart creating something akin to Randy Jackson’s outfits on American Idol.
Even still was it really that bad?
YES, YES, YES. It was worse than Sarah Palin trying to sound intelligent. If you don’t believe me I have included some sample HTML from an antique website that shows an example of an average b to b website that still utilizes this technique. This code belongs to a hosting customer at Zipline whom we really enjoy, unfortunately her designer unknowingly created some very messy HTML. This is not nearly the worst I have seen but it is quite outdated and uses spacer gifs. Please, and I must stress PLEASE do not try this at home:
<!-- new site -->
<!--
labradoodle,labradoodles,goldendoodle,goldendoodles,breeders labradoodle,breeders goldendoodle,dog labradoodle,dog goldendoodle,labradoodle puppy,goldendoodle puppy sale,labradoodle sale,goldendoodles sale,breeders labradoodles washington spokane,breeders goldendoodles washington spokane
-->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script type="text/javascript"><!--mce:0--></script>
@import url( "Templates/style.css");
@import url( "Templates/style.css");
<div>
<div>
<table id="table3" style="BORDER-COLLAPSE: collapse" border="0" cellpadding="0" width="85%">
<tbody>
<tr>
<td colspan="4">
<object width="460" height="203" data="images/-movie.swf" type="application/x-shockwave-flash"><param name="FlashVars" value="12171" /><param name="Movie" value="images/abracadoodle-movie.swf" /><param name="Src" value="images/abracadoodle-movie.swf" /><param name="Loop" value="false" /><param name="Quality" value="AutoLow" /><param name="AllowScriptAccess" value="always" /><param name="DeviceFont" value="0" /><param name="EmbedMovie" value="0" /><param name="BGColor" value="#000000" /><param name="bgcolor" value="#000000" /><param name="src" value="images/abracadoodle-movie.swf" /><param name="quality" value="AutoLow" /></object></td>
</tr>
<tr>
<td width="19%" height="26">
<div><span style="color: #ffff00;"><em><strong><a name="top0"><span style="font-size: x-small;"></span></a><span style="font-size: x-small;"> Hancock</span></strong></em></span></div></td>
<td width="17%">
<div><em><strong><span style="color: #ffff00; font-size: x-small;"> Spokane,
WA</span></strong></em></div></td>
<td width="22%">
<div><em><strong><span style="color: #ffff00; font-size: x-small;">
Ph:
(509)
245-3800 </span></strong></em></div></td>
<td width="42%">
<div><em><strong><span style="font-size: x-small;"> <span style="color: #ffff00;">E-mail</span>:
</span>
<a href="mailto:@?subject=Inquiry from Doodle Web Site">
<span style="font-size: x-small;">@.com</span></a></strong></em></div></td>
</tr>
</tbody></table>
</div>
<table id="table2" border="0" cellspacing="0" cellpadding="0" width="70%">
<tbody>
<tr>
<td colspan="4" background="index_files/sparkleline.gif">
<div><span class="smaller"><a href="/cgi-bin/csPublisher/csPublisher.cgi"><img src="index_files/sparkleline.gif" border="0" alt="" width="500" height="15" /></a></span></div></td>
</tr>
<tr>
<td width="26%"><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="index.html">Home
Page</a></span></em></strong></td>
<td width="23%"><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="aboutus.html">About
Us</a></span></em></strong></td>
<td width="24%"><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="news.html">Puppy
News</a></span></em></strong></td>
<td width="27%"><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" />Apply
Online</a></span></em></strong></td>
</tr>
<tr>
<td height="28"><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="breed-profile.html">Our
Breeds</a></span></em></strong></td>
<td><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="ourdogs.html">Our
Dogs</a></span></em></strong></td>
<td><strong><em><span class="smaller"><a href="application.html"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a><a href="links.html">Links</a></span></em></strong></td>
<td><strong><em><span class="smaller"><a href="mailto:@.com?Subject=Inquiry"><img src="index_files/1staroll.gif" border="0" alt="" width="25" height="25" /></a></span></em></strong><span class="smaller"><strong><em><a href="photo-gallery.html">Photos &
Fun</a></em></strong></span></td>
</tr>
<tr background="/images/sparkleline.gif">
<td colspan="4" height="18">
<div><span class="smaller"><img src="index_files/sparkleline.gif" alt="" width="500" height="15" /></span></div></td>
</tr>
</tbody></table>
<div>
<table style="height: 189px;" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="72" height="55"><img src="index_files/Image1_1x1.gif" border="0" alt="" width="72" height="55" /></td>
<td width="1120" height="55" background="index_files/Image1_1x2.gif"></td>
<td width="68" height="55"><img src="index_files/Image1_1x3.gif" border="0" alt="" width="68" height="55" /></td>
</tr>
<tr>
<td height="65" align="right" background="index_files/Image1_2x1.gif"></td>
<td width="1120" height="65" align="middle" valign="top" bgcolor="#c3c4f3">
<img src="index_files/welcome.gif" alt="" width="429" height="128" />
<strong><em><span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #de0143; font-size: small;">Quality breeder of Labradoodle<span lang="en-us">,
</span>Goldendoodle <span lang="en-us">and other Poodle-Hybrid
</span>Puppies
in Spokane, Washington</span></em></strong>
<em><strong>
<span style="font-family: Eras Demi ITC; color: #ffff00; font-size: x-large;">As seen on the Today
Show!</span></strong></em>
<a href="news.html"><img id="img1" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button2E.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button2D.jpg')" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'images/button2D.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/button2C.jpg')" src="index_files/button2C.jpg" border="0" alt="PUPPIES NOW AVAILABLE!" width="275" height="30" /></a>
<em><span lang="en-us"><span style="font-size: x-small;">Click for details!</span></span></em>
<table id="table4" border="0" cellspacing="0" cellpadding="10" width="100%">
<tbody>
<tr align="middle" valign="bottom">
<td width="54%">
<div><span style="color: #ff3366;"><strong><span style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: small;"><a href="/breed-profile.html"><img src="index_files/ongo-purple-flowers.jpg" alt="" width="286" height="191" />
<span style="color: red;">Labradoodle - Click Here for details!</span></a></span></strong></span></div></td>
<td width="46%">
<div><span style="color: #ff3366;"><strong><span style="font-family: Geneva,Arial,Helvetica,sans-serif; font-size: small;"><a href="breed-profile.html"><img src="index_files/goldendoodle.jpg" alt="" width="159" height="196" />
<span style="color: red;">Goldendoodle - Click her for details!</span>
</a></span></strong></span></div></td>
</tr>
</tbody></table>
<a href="cairnoodles/index.html">
<img src="index_files/cairnoodle4.jpg" border="0" alt="" width="170" height="200" />
<span lang="en-us"><span style="font-size: small;"><strong><span style="color: #de0143;">New!!</span>
Cairnoodles!
Click here for details!</strong></span></span></a>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">What do you get when you combine the stunning good
looks and sunny disposition of the Labrador<span lang="en-us">,
</span>Golden Retriever <span lang="en-us">or Cairn Terrier </span>with the
affectionate nature, intelligence and devotion of the Standard or
Miniature Poodle? Pure Magic!</span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">We've got more than a few tricks up
our sleeves when it comes to breeding and raising the perfect family dog!
With more than 25 years experience as a dog breeder, animal health
professional and die-hard dog lover, She is dedicated to
producing healthy, beautiful, intelligent and well-socialized
Labradoodle<span lang="en-us">, </span>Goldendoodle<span lang="en-us"> and <a href="cairnoodles/index.html">Cairnoodle</a>
</span>puppies for approved families. Her kennel is located on a small
ranch in the scenic countryside, south of Spokane, Washington, where her
dogs thrive on plenty of fresh country air and wide open spaces. Her
dogs are part of her family - they live with her in her home, and join
in all kinds of activities, from outings and running errands, to tagging
along on trail rides... and yes, the Doodles have even
appeared on television, enjoying time in the limelight on the "<strong>Today
Show</strong>"! </span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">She says that, aside from puppy breath, the most
enjoyable and rewarding part of breeding dogs is to see the smile and
twinkling eyes on the new owners the first time they hold their new puppy.
Now, THAT IS MAGIC!</span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">If you are interested in adding some Labradoodle<span lang="en-us">, </span>Goldendoodle <span lang="en-us">or Cairnoodle
</span>magic to your life, she will be happy to speak with you and
assist you in making the right decision about a puppy for you. Please feel
free to call or email for more information, or visit our
Kennel News Page for the latest information and photos about upcoming
litters and available puppies.</span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">Shipping can be arranged to approved homes, world
wide, weather permitting.</span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #003366; font-size: small;">We look forward to hearing from you!</span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #ff0066; font-size: x-small;"><strong>Be sure to visit our "<a href="news.html">Puppy News</a>" page to find
out all about upcoming litters, planned breedings, available puppies and
other neat stuff!</strong></span>
<div></div>
<div>
<table id="table1" border="0" cellspacing="0" cellpadding="10" width="85%" align="center">
<tbody>
<tr>
<td width="35%" align="right" valign="top"><strong><span style="color: #6666ff; font-size: x-small;">To Contact Us:</span></strong></td>
<td width="65%"><em><strong><span style="font-size: x-small;">She
Spokane,
WA
E-mail:
<a href="mailto:@?subject=Inquiry from Doodle Web Site">@</a>
</span></strong></em><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: x-small;"><em><strong>Ph:
</strong></em></span><strong><em><span style="font-size: x-small;">(509)
245-3800 </span></em></strong></td>
</tr>
</tbody></table>
</div></td>
<td width="68" height="65" background="index_files/Image1_2x3.gif"></td>
</tr>
<tr>
<td width="72" height="69"><img src="index_files/Image1_3x1.gif" border="0" alt="" width="72" height="69" /></td>
<td width="1120" height="69" background="index_files/Image1_3x2.gif"></td>
<td width="68" height="69"><img src="index_files/Image1_3x3.gif" border="0" alt="" width="68" height="69" /></td>
</tr>
</tbody></table>
</div>
<em><strong><span style="font-family: Verdana,Arial,Helvetica,sans-serif; color: #ffffff; font-size: xx-small;"><a href="index.html">Home Page</a> | <a href="aboutus.html">About Us</a> | <a href="breed-profile.html">About Labradoodles &
Goldendoodles</a> | <a href="ourdogs.html">Meet Our
Labradoodles & Goldendoodles</a>
<a href="news.html">Labradoodle Puppy For Sale &
Goldendoodle Puppy For Sale</a> | <a href="links.html">Labradoodle & Goldendoodle
Links</a>
<a href="application.html">Apply Online
for a Labradoodle Puppy or Goldendoodle Puppy</a> | <a href="photo-gallery.html">Photos &
Fun</a>
</span></strong></em><span class="smaller"><a href="/cgi-bin/csPublisher/csPublisher.cgi"><img src="index_files/sparkleline.gif" border="0" alt="" vspace="4" width="685" height="15" /></a></span>
<span style="font-family: Geneva,Arial,Helvetica,sans-serif; color: #ffffff; font-size: x-small;"><strong><span style="font-family: Georgia,Times New Roman,Times,serif;"><em><span style="font-family: Verdana,Arial,Helvetica,sans-serif;">Copyright© 2003
All rights reserved</span></em></span></strong></span></div>No related posts.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Dude, I am an old timer and still use this technique which I prefer over the laborious css institution. Do not attempt to put down the brave work of your forefathers.
I vividly remember those days. I began web site development all the way back in 1995. I remember telling a co-worker that if she didn’t learn to use nested tables she wouldn’t last very long in this business. I then told her, many years later, the same thing regarding CSS layout. I wonder what’s next. I have the HTML5 specs and what it claims to do for layouts but who knows. I still like CSS and JQuery to manipulate it.
Anyone who develops HTML emails, will know these have re-incarnated. I hate using them, but for emails to work accross all clients (Gmail and Outlook 07 being the most incompatible), then there is no other choice.
You mean to say that the pixel spacer has died out in favour of CSS? Haha! Give me a break. I can’t really see CSS ever being better than nested tables. I mean don’t get me wrong, CSS is good for making text bold and whilst I like the simplicity of , I admit that CSS is slightly better in this area. But that’s about it. Best not to jump the gun onto the CSS bandwagon Ryan, you’ll just embarrass yourself in public.
@Harold Bishop
CSS is better when people say it is not they obviously don’t know better. lol gif spacer lol
I like how the example has:
@import url( "Templates/style.css");twice… just to make sure that it really was imported