Background image for a table row in IE7

Having this structure:

<tr class="current">
 <td class="project-number">
 </td>
 <td>
 </td>
</tr>

.current {background-color: #dcdcdc !important; background: url(../images/current-item.png) no-repeat 0 0;}

Class “current”  would display a “>” arrow to highlight the selected row, however IE7 displays the arrow on each table cell.

The solution is to include a css just for IE7:

<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]-->

Then in ie7.css:

.current td {background: none;}
.current td {background-color: #dcdcdc !important;}
.current td:first-child {background-color: #dcdcdc !important; background: url(../images/current-item.png) no-repeat 0 0;}

Update: Chrome and Safari have the same bug as IE7, Opera renders the image correctly.