Can't Display a Background Image in a Table Cell

Fails to display in IE 6 PC and IE 5.2 Mac

[sabrosa]

I am having major difficulty getting a backgraound image placed in a table cell to display properly. It shows up fine in Safari and Firefox (Mac) but fails to render in IE 6 (PC) and IE 5.2 (Mac). I've searched the forums and can't seem to find a solution that works.

I need the image to repeat vertically to fill in the cell.

The code that works in Safari and Firefox is:
<td colspan="3" valign="top" background="images/index_13.gif"><img src="images/index_13.gif" width="374" height="10" alt=""></td>

I've tried adding a table inside of the cell with a transparent gif. I also tried CSS but I can't get it to work either.

Please help before my brain explodes!

[sabrosa]

Does anyone know of some CSS or an HTML trick I could do to get this to work? Please.

Thanks in advance.

[tedster]

CSS
.whatever {
background-image:url(pathtoimage.gif);
background-repeat:repeat-x;
}

HTML
<td class="whatever" colspan="3">Your Content</td>

[sabrosa]

No go.

That works perfectly in Firefox and Safari but still fails to show up in IE for the PC or the Mac.

There is no content in the cell. I tried using a transparent gif but still no background.

What I have looks like this:

CSS
.background_a {
background-image:url(images/index_13.gif);
background-repeat:repeat-y;
}

HTML
<td class="background_a" colspan="3"></td>

Anything else you can think of? Thanks.

[sabrosa]

I noticed if I put text in the cell the background will appear as far down as the text goes. This doesn't work though because I can't have text in the cell. Maybe this will spark an idea for someone else though.

[tedster]

I made one error - repeat-x is for horizontal tiling, but you asked for vertical tiling. That is repeat-y

While you are testing, you may want to skip the background-repeat: rule because the default will be to tile both ways.

Yes, you will need some content in the cell - try &nbsp; if you want no visible content. Also, for development you may want to use border="1" in the table to be sure your cell extends where you thinnk it does.

And finally, most importantly, validate your html and css - a simple error can give you unexpected display problems that you will never remedy until you fix the error.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[sabrosa]

I got it to work after validating the site. Thanks for the tip, I'd still be banging my head against the wall without it.