I have a link in my web page:
<div class="site-logo">
<h1 class="site-title">
<a href="http://10.0.0.201/wp/" title="Document & Draft" rel="home">Document & Draft</a>
</h1>
<h2 class="site-description">For power CAD users</h2>
</div>
The "site-logo" class is as follows:
.site-logo{
display: block;
text-align: left;
color: #9FA32E;
font-family: "Trebuchet MS",Arial,Helvetica,Sans-Serif;
font-size: 42px;
text-decoration: none;
}
I'm expecting the text in the link to be 42px high, coloured #9FA32E and without the underline that normally denotes a link.
The text is indeed 42 pixels high, but it's coloured the deep purple of a visited link and it has an underline beneath it.
Firebug doesn't tell me where the override is occurring.
The <a href> anchor is obviously what's causing the override as when I remove the anchor the text is displayed as expected.
The CSS for the "a" is as follows:
a {
color: royalblue;
}
a:visited {
color: purple;
}
a:hover,
a:focus,
a:active {
color: midnightblue;
}
How can I make sure that the "a" anchor doesn't override my "site-logo" class?