Styling a span inside an anchor tag

Question

I'm trying to make this look pretty, but I've run into a problem. I have a span element containing a Subtitle or short description inside the anchor tag. Unfortunately it's styled the same way as the anchor, which is not how I want it to be. I've tried applying styling to the span itself but they seem to be overridden by the anchor styles. The problem is that I don't want it to be underlined when the link is hovered over.

Here's my html.

        <ul>
           <li><a href="#">A <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">B <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">C <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">D <span class="subTitle">Subtitle</span></a></li>
           <li><a href="#">E <span class="subTitle">Subtitle</span></a></li>
        </ul>

And my CSS

#leftNav ul li { position: relative; }
#leftNav ul li a span.subTitle
{
   bottom:          4px;
   color:           #000000;
   display:         block;
   font-size:       12px;
   left:            10px;
   position:        absolute;
   text-decoration: none;
}

I've tried styling the span itself, which doesn't seem to have any effect. Placing the span outside the anchor, relative to the li doesn't work either. the span blocks the hover event of the anchor and it isn't clickable.

Answer 1

A test of your sample code (adding in a suitable div with id around it) seems to work fine:

http://jsfiddle.net/44ndf/1/

Its default styling will of course be the same as the anchor so you will potentially need to override things back to normal. You'll have to provide a working (or more accurately a not working) sample for us to be able to precisely narrow down where your problem lies.

In conclusion though things to check include:

1) That your selectors are definitely pointing to the correct elements (eg in the above I had to include a div with id "leftNav" to make the selector pick it up

2) That you defintiely don't have conflicting styles - possibly something with higher precedence or possibly something with a !important overriding it.

3) Use Firebug to see exactly which styles are being applied from which CSS selectors to identify where your problems lie.

Edit:

In the case of the underline it seems that it is impossible (or at least no way I've found) to override the a styling. So instead I changed the markup around a bit:

http://jsfiddle.net/44ndf/2/

<a href="#"><span>A </span><span class="subTitle">Subtitle</span></a>

With this markup you can set styles as follows:

#leftNav ul li a span.subTitle
{
    text-decoration: none;
}

#leftNav ul li a span
{
 text-decoration: underline;   
}

#leftNav ul li a
{
 text-decoration: none;  
}

This basically tells the anchor not to have underlines. All spans to have underlines and then your subtitle span not to have underlines. You will need to obviously make sure that everythign that wants underlining is in a span (anything not in a span won't be underlined).

For what its worth it looks like a browser bug to me since IE seems to behave well - http://jsfiddle.net/44ndf/5/ has no underline on the subtitles on IE but does on firefox. I suspect there is somethign special abotu the underlines from anchors not being overridden.