 |
 |
Webmaster Bag of Tricks
The 1 pixel Transparent GIF
Webmasters often need to control spacing on a page in absolute pixel dimensions. Using GoLive's "grid" can provide this, but has many disadvantages. A tiny one pixel wide by one pixel tall GIF that is transparent can be placed on a page and stretched to any size. GIF is a very efficient image format for limited color images, so a 1 pixel by 1 pixel transparent GIF can be as small as 43 bytes. This downloads almost instantly, and because the browser will cache an image and reuse it, the browser only downloads it once, no matter how many times you use it on a page or a site.Where to get one? Well, you can make one or you can download one here.
To make one is fairly simple in most image editor programs. Here are the steps using Adobe Photoshop:
- Select File > New...
- Set the name to "spacer.gif"
- Set the width and height both to 1 pixel (the resolution (dpi) doesn't matter)
- Set the Mode to RGB
- Set the Contents to Transparent
- Click OK
- Now select File > Save For Web
- Select GIF, and be sure to place a check mark in the Transparent box. None of the other settings matter
- Click OK
- Browse to your image folder and click Save
That's it, you now have a 1 pixel by 1 pixel transparent GIF image to use as a spacer anywhere in your site.
Note: If you have a different image editor, you probably won't have the Save For Web option. Be sure to save the image in GIF89 format, with transparency enabled. You may have to select a background color as the transparency color.
Using the 1 pixel transparent GIF:
Simply place an image in a cell of the table (or anywhere on your page) and browse to your "spacer.gif" image (or whatever you called it). Then set the width and height to the size of space you need. It is best to do this as soon as you place the image. Otherwise you might have trouble finding it on the page to click on since it is so small. Unless it really needs to be 1 pixels square, it is usually best to set it with a larger height and width so you can click on it later. For example, when I need a 1 pixel wide row, I make the image be 1 pixel by 15 pixels so there is something to click on later.Some typical uses for a 1 pixel transparent GIF:
- Since Netscape browsers do not render cell backgrounds without anything in the cell, if the cell needs to be small then a transparent GIF is placed in the cell to make the background color or image show up.
- To make a thin vertical or horizontal line on a page you can set the row or column of a table to be 1 or 2 pixels wide and place a transparent GIF in the cell. Then set the background color of the cell to the color you want the line to be.
- Since Netscape ignores table height commands in nested tables, placing a transparent GIF in a cell will force that row to be a certain height
- Use transparent GIFs as masks around submenus in a drop-menu. Place them in a floating box and stretch them so they cover a large area around the submenu. Then set them as a link to nothing (place "#" without the quotes into the link). Add actions on Mouse Enter so that when the mouse hits the GIF it hides the submenu and also the FB holding the transparent GIF. You also need to Show the FB the GIF is in at the same time you show the submenu. Read a menu tutorial here.
- You can use a transparent GIF to force space at the start of a paragraph, or anywhere within the paragraph
- Create spaces in a column or row of a table to space cells differently in different parts of the table. (for uniform spacing simply use the cellpadding and cellspacing settings for the table)
Download a transparent GIF here.
