Positioning
Spacer Images
Images used for positioning are usually refered to as "spacers". Spacer images are 1 pixel by 1 pixel transparent GIF image files. They are resized using the WIDTH and HEIGHT attributes of the IMG tag as a way to absolutely position content.
Spacer images present many difficulties to developers of web resources and users of both graphical and non-graphical browsers. Graphical browsers render a web resource at a fixed width that does not adjust to the resolution or physical size of the display. For non-graphical browsers, there is no way to automatically seperate images that provide important content from those that provide unusable styling information. On the New York Times' website there are over 70 spacer images without ALT text; speech browser users might hear, "spacer dot gif," spoken over seventy times as they browse the page.
Fortunately, modern browsers support CSS standards that make the use of spacer images obsolete for modern web developers.
Example of Positioning with Images
User's View in a Graphical Browser
User's View in a Browser with Images Turned Off
CSS Positioning
- Positioning and Sizing
- Padding and Margins
- Content Reflow