Well, I'm in the middle of doing a site redesign and then I've spotted a problem with a link on the page. Now, I've been trying to get the thing to do what I want it to for the last couple. Anyway, the link in question is at the bottom left hand side of the page (the Search Checker Design link):
Checker Design | Content Management Systems
What was happening initially was that the link was coming up in Times New Roman instead of Verdana. Got that one sorted. Now, it seems to be working fine except that once you've been on the link, the hover doesn't work... It should be grey normally and turn dark blue on rollover. But once you've tried the link and go back, it's having none of it. I'm assuming it's some CSS issue with it but I can't see it.
The HTML code in question (with the bit before and after):
HTML Code:
<img border="0" src="images/headings/contact.gif" width="200" height="20" alt="Contact Us" class="title">
<p class="telephone">0800 622 6392</p>
<a href="mailto:enquiries@checker-design.com" class="email">enquiries@checker-design.com</a>
<div class="left-spacer">
</div>
<a href="/search" class="search">Search Checker Design</a>
<div class="left-spacer">
</div>
And the CSS for class="search"
Code:
.search
{
width: 170px;
height: 20px;
clear: both;
float: left;
padding: 2px 0 3px 25px;
line-height: 20px;
vertical-align: middle;
margin: 0 0 0 0;
color: #666666;
background-color: #ffffff;
background-image: url(images/search.gif);
background-repeat: no-repeat;
background-position: top left;
}
a.search:link
{
text-decoration: none;
color: #666666;
}
a.search:hover
{
color: #000066;
}
a.search:visited
{
text-decoration: none;
color: #666666;
}
a.search: active
{
color: #000066;
}
Now, this could just be me being dim (and tired!) but I really can't see much wrong with the code so any suggestions would be most welcome.
Thanks