Want to ensure that browsers don't adjust your column Widths?

Tables can assist in page layout but browsers feel free to disregard the widths that you specify for your columns if they think other columns require more space than you have given them.

To rectify this, you need to place something in the column that requires the full width of the column to display. Browsers will not make a column narrower than the shortest piece of non-wrappable text or the narrowest image that it needs to fit in the column. The best way to guarantee the column width is to place an image in the column that takes up the full width of the column.

You don't want an image to display in the column? Well you can use an image that doesn't display. GIF images can have a transparent background to allow the background of your page to show through the image and allow the image to appear to be a non-rectangular shape. If the only colour in the image is the background colour then the image doesn't show up on the screen at all.

Using a transparent image has another advantage. If we distort the image by specifying different height and width parameters from the actual height and width then the image looks ridiculous, but we can't see a completely transparent image so it doesn't matter if we distort it. We can use a 1x1 transparent image and specify the required height and width parameters to achieve the desired result.

To download a copy of a minimum sized transparent image click here.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow