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

Question

I have the following style rules:

.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 can detect which rule suppresses a:hover so that I can figure out similar issues in the future?

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.