Single Pixel GIF Trick   Because of current HTML limitations, site designers must resort to all sorts of workarounds in order to have control over the layout of pages. The single-pixel GIF is probably the most significant of these workarounds. The first edition of Creating Killer Web Sites relied heavily on the single-pixel-GIF trick. It was the only thing that provided reliable control of white space across browser versions and platforms. While I occasionally still use that trick, I consider it a rather old bandage. It adds to the server load, confuses people surfing with images turned off, and it doesn't make editing HTML any easier. When Cascading Style Sheets (CSS) are consistently well implemented in browsers, I hope we can throw these hacks away and begin, finally, to do things right. For now, though, the single-pixel GIF still sometimes comes in handy. Here's how to make the most of them. This paragraph uses a single-pixel GIF to create the indent at the beginning. By using a transparent, single pixel image, with HSPACE=X and VSPACE=Y arguments in the <IMG> tag, you can position the elements on your page where you want them. The examples below will give you an idea of the differences between width/height and hspace/vspace. This has 5 pixels of hspace on either side. This has 25 pixels of hspace on either side. This has a width of 5 pixels. This has a width of 25 pixels. This has a width of 25 pixels and a height of 5 pixels. Using hspace/vspace is cleaner, since it doesn't actually scale the image, and it gives you twice as many pixels for each unit you specify.
	Core | Top | Feedback