Read at your own risk
2011 October 1/10:32 PM
This document dates from the early web period, and is kept for archival purposes only. It is no longer updated, and contains much that is apocryphal, or at least wildly inaccurate.Web browsers can automatically adjust your page, your tables, your text, just about everything, according to the size of the individual reader’s window. But only if you let them.
Percentages, not pixels!
Where you need an image to take up a certain part of the window, don’t constrain the window size. Let the browser adjust the image size instead. Use percentages to control the width of items. Most tags that take pixel sizes will also take percentage sizes. The percentage is, for “outer” tags, a percentage based on the size of the window. If you specify <TABLE WIDTH="50%">, the table will automatically be sized to half of the width of the page.
For “inner” tags, the percentage is based on the size of the outer tag. So, <TD WIDTH=25%> sets that column to one quarter of the width of the entire table.
You can use percentages with:
- Horizontal Rules: <HR WIDTH="33%"> sets the rule width to a third of the width of the window.
- Tables: <TABLE WIDTH="50%"> sets the table width to half the width of the window.
- Table Column Widths: <TD WIDTH="50%"> sets the column width to half the width of the table.
- Image Widths: <IMG SRC="picture.gif" WIDTH="100%"> sets the width to the width of the window.
- Image Heights: <IMG SRC="picture.gif" HEIGHT="50%"> sets the height to half the height of the window.
Note that if you are using style sheets, you’ll want to use “em” units to set the widths of items. This unit is relative to the size of the browser’s text.
Prepare ye the way for the pixels
If you aren’t changing the size of your image to fit the page size, let the browsers know the raw size of the picture. If you specify the exact pixel size of the picture, and the browser doesn’t load the picture, it will still map out the correct amount of space, ensuring that your page still looks the way it should, albeit without the picture.
You’ll need to use a graphics editor of some sort to find out the size of the picture, and then put the pixel height and width into the <IMG> tag:
<IMG SRC="picture.gif" WIDTH="42" HEIGHT="64">
One caveat is that the picture’s placeholder will hold your alternate text. If the placeholder isn’t big enough to hold the text, the text will get chopped.
