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.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s