display | more...

The one-pixel transparent GIF is typically viewed as a crutch by the more hard-core HTML formatters such as myself. In general, there are better ways to make a buffer space around any elements in the web page, and also to position things exactly where you want them. Indenting text is nothing that a handful of   tags can't do, although I must reiterate that you're not supposed to do that in the first place.

Tables have the "cellpadding" and "cellspacing" attributes to create buffer space in the individual cells. Images have the "hspace" and "vspace" attributes to create buffer space around them. In general, when you want precision alignment, tables are your best tool. The table cells can be set to specific pixel widths and heights, or even as a percentage of the available space. If you're careful with formatting your formatting code (meta-formatting?), nesting tables isn't a problem.

The one use I have found for the one-pixel transparent GIF is in ensuring that your table cells can be set to some minimum width and no smaller. Setting the size of the table cell only ensures its maximum width. In most cases this will work out fine, and the table will display the way you want it to, at the width you set it. However if the table requires more room than the browser window has available, the browser will compress any cell columns with spare room to make up the difference. The only thing stopping this compression will be images in the cell (not background images, and certainly not text), or HTML entities with a fixed width such as nested tables or horizontal rules.

Normally this shouldn't be a problem because you should be designing your web page to display properly on any reasonable browser window size. Unfortunately there is no way to ensure that your viewer is being reasonable.

The solution is to put your one-pixel transparent GIF in the cell and use the "width" attribute of the <img src...> tag to set it to your desired cell width. This acts like a cross-brace to prevent the walls from collapsing. This will, of course, protect the entire column of cells in which this is done to one cell. If the viewer tries to use a browser window too narrow to view the page the way you designed it, a horizontal scroll bar will appear at the bottom of the window to view the rest of the web page which is sticking out the side of the viewable window.

In general I find it handy to use this brace to set the exact width of all but one of my table cells and to set a minimum width of the remaining table cell (invariably the one containing the page's main content). So in most of my cells, the transparent GIF will be set to the actual cell width, while in the remaining cell it will be set to, say for example, 500 pixels to prevent the cell from collapsing any narrower than that. It can expand as far as is necessary, but will not be collapsed beyond that minimum width.

I understand that there's these fancy-schmancy div things and cascading style sheets available that can also help. I've never seen the need to use anything beyond HTML, CGI, and javascript myself though, so I've never learned how to use them.