LD SoftwareBespoke Software, Web Design, Security Consultants and Host Services.


You have been warned!
We have caught 5848 shameful hackers.


Paypal Referral
Sign up for PayPal and start accepting credit card payments instantly.

Link Exchange
Join our free link exchange

Click Here
Spacer GIF

Web Design & Development Guide

Spacer GIF

Home | Up

Prior to the adoption of Cascading Style Sheets (CSS), the spacer GIF was a transparent image, often used to control blank space within a web page, that can be resized according to the width and height dimensions it is given. Spacer GIFs are not browser specific. The reason a spacer GIF is invisible is so that an HTML developer can create a table cell and fill the background with a specific color that can be viewed through the transparent spacer GIF. For instance, let's say the developer wants to create a blue box that is 500 x 500 pixels wide. Instead of using a separate blue graphic that is 500 x 500 pixels (taking up additional bandwidth), the developer can specify the table cell background color and specify the dimensions of the spacer GIF that already exists.

To create a spacer GIF, simply open a new Adobe Photoshop, Macromedia Fireworks, GIMP (or whatever graphics software you have) file with a transparent background and with the dimensions 1 pixel by 1 pixel. You only need it to be 1 pixel as you will specify the height and width in the HTML. Normally you would not do this with a GIF image but since the spacer GIF is transparent, stretching it will not matter. Save the image as a transparent GIF named "spacer.gif".

The use of spacer GIFs has declined due to the prevalence of CSS for laying out web pages, which achieves the same effect by changing the margin or padding on a given element. CSS is preferable as it, if used properly, reduces unnecessary code in a web page. Blank 1x1 GIFs are still occasionally used to fix a PNG rendering bug in Microsoft Internet Explorer versions 5.5 - 6.


David Siegel's 1996 book "Creating Killer Web Sites" was allegedly the first to publish the Spacer GIF technique. According to David Siegel himself, he invented the trick in his living room, while others were probably inventing the same trick at around the same time. [1]

According to a blog comment by Joe Kleinberg, he actually invented the technique earlier. However, it has not been possible to confirm further, with screenshots, code or similar. [2]

External links

  1. ^ Justaddwater (2006-03-03). Justaddwater: Who invented the Spacer GIF. Justaddwater.
  2. ^ Justaddwater (2007-02-11). Justaddwater: Who invented the Spacer GIF (part 2). Justaddwater.

Home | Up | Cascading Style Sheets | Printer friendly | Brochureware | Digital strategy | DOM scripting | Fahrner Image Replacement | Microformat | Progressive enhancement | Rollover | Spacer GIF | Techniques for creating a User Centered Design | URL redirection | Web Interoperability | Web modeling | Web template | Web-safe fonts | Website architecture | Website wireframe

Web Design & Development Guide, made by MultiMedia | Websites for sale

This guide is licensed under the GNU Free Documentation License. It uses material from the Wikipedia.


Text Ads
There isn't content right now for this block.

Community Login


People Online:
Visitors: 31
Members: 1
Total: 32

Online Now:
01 : Monty

Like my code
Then please make a donation.

Which help me produce more free code.

Paypal Verified


Powered by PHP-Nuke

Valid CSS!

Valid Robots.txt

Bad Behavior

[Valid RSS]

[Valid RSS]
You can syndicate our News with backend.php And our Forums with rss.php
You can also access our feeds via Feedburner Site News and LD Software Forums
© 2009 ld-software.co.uk All Rights Reserved.
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Page Generation: 0.45 Seconds