css href and links

Question

It seems that when I add an 'href' tag to my anchor I lose all my css formatting. Is there something special the way css treats links?

Here is the simple css

    .topmenu > ul > li > a:visited,
    .topmenu > ul > li > a:active,
    .topmenu > ul > li > a:hover,
    .topmenu > ul > li > a:link,
    .topmenu > ul > li > a { font-family:Arial; font-size:1.0em; font-weight:bold; color:White; text-decoration:none; }

Here is the html

<div class="topmenu">
    <label>Name of Dept.</label>
    <ul>                    
        <li><a href="http://www.myurl.com"&gt;Itinerary&lt;/a&gt;&lt;/li&gt;
        <li><a>Team Members</a></li>
        <li>Fundraising</li>
        <li>Resources</li>
        <li>Dates</li>
    </ul>        
</div>

The without the href formats properly. The with the href doesn't. I would have thought that the css a:link and a:visited would have covered that scenario. If I add !important to the css, then I get the proper formatting everywhere.

Answer 1

The fact that you can add !important to the rule is indicating you have another rule that is taking precedence. Do you have something that is targeting with a[href]?

Try loading up your page in Firebug or Safari's Developer tool and see if another style you have specified is overriding your rule.