I've styled a <tr> element to display a none-repeating background image. In FF it looks fine, but in Safari & Chrome it appears to be adding the image to every <th> cell, rather than the containing <tr>.

I don't see how the image is repeating, here is the CSS I'm using to apply the image:

#wine-list table .top {
    background: url('../image/wine-list-table-top.gif') no-repeat 100% 0;
    height: 43px;
}

Here is a link to the page:
http://bit.ly/c4WX4t

Has anybody else had problems like this? I could style the <thead> element instead but then that would bring up issues with IE.

Tables are not meant to be for site layout. Do you use any CSS reset? Every browser has its own "default" internal styles.

Is this effect wanted?

He's using tables for tabular data. Obviously :P

As regards to the problem, can't you just set the th background-image to none?

You've probably already tried that though.

Hmm, it's a strange one.

Originally Posted by Mime

He's using tables for tabular data. Obviously :P

As regards to the problem, can't you just set the th background-image to none?

You've probably already tried that though.

Hmm, it's a strange one.

erm... tabular data is something different I would say.

This LIST of wines should be done with LI.

Just to say that your "100% 0" is not correct since this is background-position... there is no 100% in background-position.

Originally Posted by CSM

erm... tabular data is something different I would say.

This LIST of wines should be done with LI.

Just to say that your "100% 0" is not correct since this is background-position... there is no 100% in background-position.

That would be one awfully complex list, it makes much more sense to store the data in tables due to the row of headings followed by the row of prices.

Also 100% 0 represents 'top right' in background position.

Originally Posted by Mime

He's using tables for tabular data. Obviously :P

As regards to the problem, can't you just set the th background-image to none?

You've probably already tried that though.

Hmm, it's a strange one.

Hmmm I hadn't thought of that for some reason! I'll have to give it a try, hopefully that might fix it

Originally Posted by pealo86

mmm I hadn't thought of that for some reason! I'll have to give it a try, hopefully that might fix it

Fingers crossed!

Originally Posted by CSM

erm... tabular data is something different I would say.

This LIST of wines should be done with LI.

Just to say that your "100% 0" is not correct since this is background-position... there is no 100% in background-position.

Wouldn't you consider a calendar a list of dates?

I never heard that 100% 0 is top right in CSS, the first time I ever heard about that. If you remove 100% and set it to top right or 0 0 in Firebug you will see the error disappearing (look at my post with the picture).

So I would say 100% is NOT correct. 100% is not positioning correctly. Top is, 0 is, too.

Also 100% 0 represents 'top right' in background position.

That's not correct. I think it should be 0 100% then, no?

Anyway... if it should be top right I would write "top right". Setting to 0 0 corrected the error, as I mentioned before.

I just checked this line here, corrected it in Firebug and the error I mentioned was gone, too.

Before correction:

#wine-list table th, #wine-list table td {
padding:5px 10px;
}

After correction

#wine-list table th, #wine-list table td {
padding:5px;
}

Strange

Hmmm setting it as 0 0 doesn't appear to fix it for me? It simply displays a green bar without the red badge on the right.

Originally Posted by CSM

That's not correct. I think it should be 0 100% then, no?

Nope, the first digit represents the 'x' value and the second digit is the 'y' value. So 0 100% would be bottom left.

Thanks for trying to help anyway. I'm guessing the problem is down to webkit browsers because I'm having the same problem in IE6/7.

Anything that behaves like those browsers must be doing something wrong!

Ahhh looks like I'm not the only one having this problem:
http://stackoverflow.com/questions/1...-for-table-row