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

Question

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

On hovering the trs, I would like to show 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?

Answer 1

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;
}

Answer 2

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
}