CSS rendering of <tr> background different in WebKit and Firefox

I have a table styled like this: http://jsfiddle.net/naveen/SGQBF/

On hovering the trs, I would like to sh开发者_开发知识库ow a bullet at the first td or tr.

This is working as expected in Firefox. But in Chrome the bullet is being shown at every td.

My questions are

1. Whats wrong with my CSS?
2. How could I correct that?

Changed your rules to this:

.datatable tr.row:hover , .datatable tr.altrow:hover{
    color: #000;
    background-color: #FFFACD;
/* remove background image */
}

.datatable tr.row:hover > td:first-child, .datatable tr.altrow:hover >  td:first-child {
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
}

I think that's a bug.

Here is a work-around.

.datatable tr.row:hover, .datatable tr.altrow:hover {
    background-color: #FF0000;
    color: #000;
}

.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    color: #000;
    background-color: #FF0000;
    background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
    background-position: top left
} 

The css looks fine to me. Why chrome behaves incorrectly I don't know but a quick fix would be to move the bullet from tr to tr first td. Fiddle

This would be the edited HTML:

<table class="datatable">
    <tr>
        <th class="sortasc-header"><a href="#">Name</a></th>
        <th>Profession</th>
        <th class="sortdesc-header"><a href="#">Age</a></th>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="altrow">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
    <tr class="row">
        <td class="first">Naveen</td>
        <td>Consultant</td>
        <td>24 years</td>
    </tr>
</table>

And this would be the edited CSS (Bold is what was edited):

.datatable
{
    border: solid 1px #7f7f7f;
    color:#000000;
    width: 100%;
}        
.datatable th
{
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px 0px;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    color: #000;
    padding: 4px 5px 4px 10px;
    text-align: center;
    vertical-align: bottom;
    font-size: 14px;
}
.datatable th a
{ 
    color:#00002B;
    padding-right:18px;
    text-decoration: none;
}
.datatable th.sortasc-header, .datatable th.sortdesc-header {
    background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px -100px;
}

.datatable th.sortasc-header a {
    background:url(http://quenshsolutions.ie/Images/asc.gif) right center no-repeat; 
}
.datatable th.sortdesc-header a {
    background:url(http://quenshsolutions.ie/Images/desc.gif) right center no-repeat; 
}
.datatable tr {
    font-size: 12px;
    color:#777;
}
.datatable .row td, .datatable .altrow td 
{
    text-align:left;
    padding: 4px 10px 4px 10px;
    border-right: solid 1px #cbcbcb;
}
.datatable .row 
{
    background-color: #FFFFFF;
}
.datatable .altrow 
{
    background-color: #EDF5FF;
}  
.datatable .row td.sortasc-row, .datatable .row td.sortdesc-row
{
    background-color: #EDF5FF;
}
.datatable .altrow td.sortasc-row, .datatable .altrow td.sortdesc-row
{
    background-color: #DBEAFF;
}      
**.datatable tr.row td.first:hover, .datatable tr.altrow td.first:hover{
    color: #000;
    background-color: #FFFACD;
    background-image:url(http://quenshsolutions.ie/Images/bullet.gif);
    background-repeat: no-repeat;
}
.datatable tr.row:hover, .datatable tr.altrow:hover{
    color: #000;
    background-color: #FFFACD;
    background-repeat: no-repeat;    
}**

.datatable .row td.first { padding-left:10px; }
.datatable th.first { padding-left:10px; }