asked on

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;

}

ASKER CERTIFIED SOLUTION

WebDevEM

membership

This solution is only available to members.

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

Start Free Trial

KnowledgeWare

ASKER

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

WebDevEM

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.

WebDevEM

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.

KnowledgeWare

ASKER

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

WebDevEM

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

KnowledgeWare

ASKER

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