How do i remove the backgroundcolor in a <th> tag in all IE browsers when using background images?

Question

I'm trying to style my table-head so it has rounded corners with images like this:

<tr style="background: url(middleimage.gif) repeat-x;">
    <th style="background: url(leftimage.gif) no-repeat;">
        title
    </th>
    <th>
        title
    </th>
    <th style="background: url(rightimage.gif) no-repeat;">
        title
    </th>
</tr>

in firefox this works fine, but in ie it fills out the first and last th-tag with a white background color and not showing the background-image in the tr-tag.

Example:

How do i fix this?

Answer 1

have you tried

style="background: transparent url(yourimage.xyz) no-repeat;"

Answer 2

I presume that somewhere you are setting that background colour to white. Do you need to be doing this? Can you set your selector to be more specific so you don't include these elements? Can you specifically override those to be transparent (using whatever is necessary to make sure these overriding declarations take precedence)...