Cross-browser >> Table background images

[steedvlx]

Hi,

I have a site that I have put a great deal of work into. I use NS, FF, and Opera to check the sites. However, recently, I have unconciously left IE out of the test browser mix. most likely due to personal feelings about the browser. (pretty ignorant huh?)

Well, live and learn I guess. The table in question has data loaded from MySQL in which the number of rows is variable. In order to make the table 'fit' the data, I use background images in the rows.

Here is the link to the test site. templates.chirowebjapan.com

(If you use utf-8, all the question marks will be replaced with Japanese)

Anyway, if you use anything except IE, the backgrounds appear perfectly. In IE... nothing except the 'MENU' title appears (regular foreground image) with the text barely visible due to the background color.

The question is... Does anyone know of a workaround for this. I know sometimes a specific HTML directive such as 'transparency' for iframes will cure these problems. But, for table image backgrounds, I can't find it.

In fact, as I write this, I'm not sure if the transparency on the nested data tables is supported.

Any insight is appreciated.

Thanks,
SteedVLX

[jscheuer1]

This kind of style works with tr's and td's cross-browser:

<tr style="background-image: url(images/banner7a.gif); background-color: rgb(255, 228, 196);">

so does:

<style type="text/css">
tr.odd {
background:rgb(255, 228, 196) url(images/banner7a.gif);
}
</style>

when used with:

<tr class="odd">

Which brings up the point, whenever you provide a background image, provide a background color so your text is legible even if the image doesn't load for whatever reason.

[steedvlx]

Thanks. That looks interesting and I'll try to implement it and see what happens.

SteedVLX

[steedvlx]

Well, that didn't take long...

That works beautifully! I just stuck in the tr style for one row, and it loaded in IE nicely. I'll make all the changes tomorrow (it's 2:00am here now) and it will actually be licked.

Thank you for that very nice little snippet.

SteedVLX

[steedvlx]

At the risk of seeming overly enthusiastic... I am starting to love CSS more and more every day...

The changes are complete, and now all browsers just love the page.

Thanks again for the great tip.