Browser Compatibility: Background Images & Colors in Tables and Table Cells

In most cases, your web page will probably use some sort of table structure, often with background colors or images. Once again, what looks fine in Internet Explorer may not look good in Netscape.

Occasionally you'll find that the background image or color simply doesn't show up, and you only see a blank area where the table cell should be. Most likely you must go to your page and make sure that you do not have an empty cell. For Netscape to render table cells, they must have some kind of content in it - text, images, or non-breaking spaces. You may either use a transparent gif inside the table cell, or go to the HTML and type " " (the code for a non-breaking space).

A table in Internet Explorer.	The same table in Netscape 4.7 or 6.

In another interesting complication, you'll find that the background image is tiling across cells in some versions of Netscape (but not in Internet Explorer). What probably is happening is that you probably have a background image defined for the entire table, or you have a table over another table that has a background image in a cell or for the table. To solve this, you must create a transparent gif (usually you can make it a 1x1 pixel transparent gif) and use that as the background image for each table cell. In FrontPage's Normal View or Preview, the cell will look solid-colored (without the background showing through), but simply go to File > Preview in Browser to see what the page will really look like.

A table in Internet Explorer. The table has a background image defined using the JGT image.	The same table in Netscape 4.7 or 6. As you can see, the table's background image tiles in each cell.

Summary

Netscape 4.x or 6 will not tolerate empty table cells. Use spacer graphics or non-breaking spaces judiciously. Netscape 4.x or 6 tend to tile table backgrounds. To fix this, use spacer graphics as table cell backgrounds. (Netscape 7 appears to have fixed these problems.)

Next: Form Fields