asked on

CSS TR hover in IE for child TD's

Hi Experts

Hopefully a very simple solution but I've been scratching my head with this for a couple of hours now!

I am using the code below to try and create a hover effect for an entire row. This seems to work fine in IE8 when the TD tags are transparent but mine aren't and I simply can't work out how to make the TR class override the TD class.

Would prefer not to use javascript at this point but certainly wouldn't dismiss it.

Many thanks

//CSS
.highlight:hover {background-color:#900;}
.tdMid {background-color:#E9E9E9;}
.tdLight {background-color:#F4F4F4;}
 
//HTML
            <tr class="highlight">
              <td align="center" class="tdMid">Data 1</td>
              <td align="center" class="tdLight">Data 2</td>
              <td align="center" class="tdMid">Data 3</td>
              <td align="center" class="tdLight">Data 4</td>
              <td align="center" class="tdLight">Data 5</td>
            </tr>

Open in new window

ASKER CERTIFIED SOLUTION

jessc7

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

sirnutty1

ASKER

Many thanks jessc7

I have added the suggested line which is getting closer but the underlying TR background-colour is always white now!

Feeling very thick today!! Any ideas

.tdMid {background-color:#E9E9E9;}
.tdLight {background-color:#F4F4F4;}
.highlight:hover {background-color:#900;}
.highlight:hover td {background-color:transparent;}

Open in new window

sirnutty1

ASKER

Just managed to work it out thanks to your original post.

Sincere thanks, headache averted.

sirnutty1

ASKER

.tdMid {background-color:#E9E9E9;}
.tdLight {background-color:#F4F4F4;}
.highlight:hover, .highlight:hover td {background-color:#FFDFDF;}

Open in new window

jessc7

I know what those days are like!

I'm not exactly sure. When I view it locally, everything works fine. I've included my test HTML as well as a couple screenshots showing the off state and the hover state.

What DTD are you using?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.tdMid {background-color:#E9E9E9;}
.tdLight {background-color:#F4F4F4;}
.highlight:hover {background-color:#900;}
.highlight:hover td {background-color:transparent;}
</style>
</head>
<body>
 
<table>
<tr class="highlight">
<td align="center" class="tdMid">Data 1</td>
<td align="center" class="tdLight">Data 2</td>
<td align="center" class="tdMid">Data 3</td>
<td align="center" class="tdLight">Data 4</td>
<td align="center" class="tdLight">Data 5</td>
</tr>
</table>
 
</body>
</html>

Open in new window

off.png
hover.png