I have a table in which I have this
</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle" colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>
So I want to give background image to my tr, so I put this
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat;
position:relative;
color:White;
height:31px;
}
.thread-pic
{
width:30px;
}
.thread-information
{
width:280px;
}
.thread-top-middle
{
width:418px;
}
The problem is that in all browser's it is fine expect Google Chrome. In Google Chrome it seems that I give background not to tr, but to all td's... It repeat same background for each td.
It is the same in IE7, but in one of stackoverflow questions I read about solving that with position:relative and it helped.
But I didn't find any solutuin for Chrome.
I try to give tr css like this also
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
display:block;
position:relative;
color:White;
height:31px;
width:728px;
}
But it change all my table design... At that time text's in td's of this header row aren't in that places and also all other first td's of my table are in the same size as my header tr . It seems really hillarious.
I tried also to give display:inline-table instead of display:block and it didn't help me too...
What is the solution of that problem?
EDIT: Same problem is in Safari, so it is webkit problem.
