One of the oldest problems in webdesign is related to background images on table rows.

Problem: when you provide a background images (through HTML or CSS) on a table row:


<table>

<tr background="bg.gif">

<td>some stuff</td>

<td>more stuff</td>

<tr>

</table>

On Firefox everything would go out as planned. However in older browsers like IE 6, each of the 2 table columns will inherit the background image and you will get a nasty effect.

Solution: You will need to use background-image:none on every table cell while the row needs a position:relative.


<table>

<tr style="background-image: url(bg.gif);  position: relative;">

<td style="background-image:none;">some stuff </td>

<td style="background-image:none;"> more stuff </td>

</tr>

</table>