PC Plus
Index

  

1 pixel GIFs
Buttons
Style Sheets
More tables
More pictures
History
Source files
Site Map
About the author

Single pixel GIFs

ow can a single pixel that you can't even see be so important? It is simply the only way to accurately design page with pixel precision without having to use the (largely) Internet Explorer 4 and above only DHTML.

Watch the movie about manipulating single pixel GIFsThe only part which may be difficult is finding the single pixel image when you first insert it. Watch the Screencam movie to see how you can use the source editor to make things easier.

Below you can see how the cells and embedded tables on the left use a single pixel GIF to ensure they are of a specific width and height. The red areas show roughly where a transparent GIF is used - remember this is a single pixel GIF in real dimensions, but stretched to different dimensions by the HTML in the page. If you put the mouse pointer over each red section you will see an explanation of the usage pop up in the caption (ALT tag).

Single pixel high horizontally stretched transparent GIF - holds this table cell to size
Background created by tiling single pixel blue GIF; Table below held down by transparent GIF stretched Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 4 x 14 holds this embedded table to correct dimensions so that button.gif background shows through Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Single transparent pixel stretched to 10 pixels wide holds this cell open so the 10 pixel grauated background shows through Single tranparent pixel stretched to 5 pixel width and 600 height creates border for this cell
Back to Index

Visit PC Plus
On-line

Subscribe to
PC Plus

Free HTML Goodies

Free web tools

Miss last month's Web Workshop? Find out more about tables here.
Want a free copy of Macromedia DreamWeaver? As sold for £290.
The world's best Web page editor is only available with Issue 66 of .net magazine.
On sale in the UK 30th November 1999