using TR hover in an existing CSS

This is primarily in IE8/9. I have an existing stylesheet which makes alternating rows in a table slightly different background color. I'd like to apply a 'hover' function to the rows to make it easier to tell where you are on the document. Is there a way I can insert a 'hover' command into the CSS block below? All my attempts thus far have failed...including creating another block: .TableItemDetail tr:hover {....}  etc

Thanks
Ron

.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}
KnowledgeWareAsked:
Who is Participating?
 
WebDevEMCommented:
Something like this should work... I've created a JSFiddle at http://jsfiddle.net/webdevem/JfcJp/for you to see it in action if it helps.
<table class="TableItemDetail">
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
<tr><td>Content</td></tr>
</table>

Open in new window

.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}
.TableItemDetail tr:hover {
 background-color: #cc0000;   
 color: #ffffff;
}

Open in new window


I tested in IE8, FireFox (PC), Safari (PC) and Chrome
0
 
KnowledgeWareAuthor Commented:
Hello WebDevEM - thanks, I see from jsFiddle that works and accept the solution, however it still won't work on my page. I know I must have something else interfering with it....not sure what.

Ron
0
 
WebDevEMCommented:
If you post a link to your page (or complete code here on EE) I'm sure somebody can look at it... I'll have some time tomorrow, gone for the long weekend and back online Tuesday, but the folks here seem to be available 24x7 by the looks of some of the post times.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
WebDevEMCommented:
It also could be as simple as making sure you have a DOCTYPE set on your page... See http://www.bernzilla.com/item.php?id=762 for a more detailed explanation.

JSFiddles don't seem to have an option for NOT setting a doctype... What you saw on my page was using HTML 5, but I've tried other options and they all seem to work.  You can test those in the "Info" section on the left.

Any time you have something that SHOULD work and doesn't, it's always good to check your doctype.  I've had that come back and haunt me a number of times.
0
 
KnowledgeWareAuthor Commented:
Thanks, I never would have thought of that. I've pasted your simple table into the top of the page above the <%@LANGUAGE="VBSCRIPT"%> and it is now working there, but still not below in the main part of the page. I'll keep looking at it. I'd paste the whole thing buts its long, complicated, and ugly...

Ron
0
 
WebDevEMCommented:
No worries... I've also updated the JSfiddle with how to mark some TD cells as extra special so they get different treatment.  Headed home for the day, but I'll be back in the morning.

Ed
0
 
KnowledgeWareAuthor Commented:
Hello Ed:

FWIW I've uploaded the page and pasted in the relevent CSS lines below. Your table and 'columns' at line 440 do the rollover OK, however I can't get any of the rows further down the page (starting around Line 680) to do a hover. This is a complicated and old page, I doubt anyone else can get it to display, there is no doubt something overriding the tr:hover tag in the css.

Ron


.TableItemDetail
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #E6E5E3;

}

.TableItemDetail tr:hover {
 background-color: #cc0000;  
 color: #ffffff;
}

.TableItemDetailAlt
{
    FONT-WEIGHT: 400;
    FONT-SIZE: 9pt;
    COLOR: #000000;
    BACKGROUND-COLOR: #F4F3F3;
}

.TableItemDetailAlt tr:hover {
 background-color: #cc0000;  
 color: #ffffff;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.