css - why text-decoration doesn't work under a:hover?

Question

Hello all,

.twoColFixRt #nav-primary .nav li a, 
.twoColFixRt #nav-primary .nav li a:visited 
{
    color:#00FF00;
    text-decoration:none;
}
.twoColFixRt #nav-primary .nav li a span {
    display:block;
    padding:0 10px;
    font-size: 15px;
}
.twoColFixRt #nav-primary .nav li a:hover {
    text-decoration: underline;
    color:#FF0000;
}

Q1> I don't know why the a:hover in above code doesn't work. In other words, when the cursor is on top of the navigation item, the underline doesn't show up.

However, I do see the changes of the color when I hover the cursor over the navigation items.

Q2> I am using DW CS4 + Firebug. Is there a way that I detect which rule suppresses a:hover so that I can figure out similar issues in the future?

Thank you

Answer 1

You can get the text-decoration to show up by applying it to the nested span like so:

.twoColFixRt #nav-primary .nav li a:hover span {
    text-decoration: underline;
    color:#FF0000;
}

If you're interested as to the reason it's not currently working for you, you can read this question about inline boxes (your <a>) containing block boxes (your <span>).

As to detecting which rules are being applied to an element, I use the Web Developer addon for Firefox. It's CSS > View Style Information (CTRL + SHIFT + Y) is especially handy for this.

Answer 2

Apply the text-decoration property in the inline css of your element. If that works, find out what messes up your external css.