Historically, web pages had variable widths so browsers could adapt the pages to fit monitors of various resolutions. Since screen resolutions were smaller than they are today, the page widths were relatively short, and the pages were readable. Some designers wanted to create pages that had white-space margins and paragraph indentations. HTML, however, did not allow the designers to do that. The designers thus had to work around this weakness of HTML by developing techniques for creating margins and indentations while still keeping the variable widths. They did this through the use of transparent gif files. Transparent gif files take on the same color as the page backgrounds and hence look invisible.

Transparent gif Files Create Margins

This page that you are reading uses a transparent gif image for its margins, and it uses a table to control the position of the margins. The table has a border so you can see the boundaries of the cells. Notice that the table has three cells (one row and three columns). The first and third cells comprise the margins and contain a transparent gif that is 25 pixels wide by 1 pixel high. The gif images have a border so you can see their position and size. The cell widths are unspecified and thus adapt themselves to the width of the gif files. The table width is specified as 100% of the window so the browser will automatically adapt the table to the resolution of the monitor. The content of this page resides entirely within the center cell.

Transparent gif Files Create Indentations

The paragraphs in this page are indented 25 pixels, and this indentation is caused by a transparent gif file that is inserted at the beginning of each paragraph. The file is the same file that is used to create the margins. The gif file used with this paragraph has a border so you can see the file.

This use of transparent gif files provides a pleasing appearance to the pages that is not dependent on special HTML tags. A word of caution is due, however. Some older browsers do not support transparent gifs, and some older browsers do not support tables. Thus, this technique provides a degree of browser compatibility for margins and indentations, but it is not 100% effective. However, transparent gifs are so common on the web that people with browsers that do not support the gifs will have more serious problems than not being able to correctly see margins and indentations.

Alternate Text Descriptions

In order to provide compatibility with the Lynx browser and with text-to-speech converters, the transparent gif files have empty alternate text descriptions. See the page in this site on Graphics Files for more information about alternate text descriptions.

Use CSS

A better way to create margins is with the use of CSS.

[ Site Map ] [ Distance Learning ][ Home ] [ Up ] [ Fixed-Width Pages ] [ Variable-Width Pages ]