a href not picking up styling

Question

Hi,

I think I am being particularly stupid. I have a link, which is part of a nav bar. It picks up the hover/visited style but for some reason i cannot fathom it won't use the 'link' style, what am I doing wrong? Here is the style sheet and tags:

<table border="1" cellpadding="0" cellspacing="0" style="width:950px;height:37px;">
                        <tr>
                            <td style="width:157px;height:37px; line-height:37px;">
                                <span class="test">
                                    <a href="Default.aspx">Home</a>
                                </span>
                            </td>...

css:

.test a:link {
background-image: url('Images/Button_Home.png');
display:block;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000;
text-align:center;
vertical-align:middle;
text-decoration:none;
}

.test a:hover {
background-image: url('Images/Button_Over.png');
display:block;
font-family:Arial;
font-size:9pt;
font-weight:bold;
color:#000;
text-align:center;
vertical-align:middle;
text-decoration:none;
}

.test a:active{
display:block;
text-align:left;
}

I checked really thoroughly and nothing is (should) be interfering with this, in fact on this page there are only 3 link, no other styles, nothing, ugh.

thanks R.

Answer 1

Maybe it was already visited. Try this:

.test a:link, .test a:visited {
... style rules ...
}

Answer 2

It works perfectly for me in IE8 and FF3.5 - does Images/Button_Home.png exist?

Answer 3

Clear the cache. Make sure that 'Images/Button_Home.png' is really there. Add some other style to that selector - a big border or different color or something - so that you can tell whether the selector really isn't working, or if it's just the one different line.

Also, take a breath. Go get some water. Walk around. When you come back it will make more sense.

Answer 4

I've not tested this out, so this is just a guess, but I had a similar problem earlier today with a project I'm working on...

...Your 'test' class is on the span element and not the link. IE in particular (especially IE<7) can be very temperamental when it comes to links, and if I remember righyly, IE has a thing about hover states only functioning correctly on link elements (though as your style's working okay on hover, obviously the specific hover problem isn't a problem in this case.

Your CSS makes perfect sense, given the sample of HTML you've shown, but sometimes, putting the style on the link element itself rather than it's containing element is less problematic (and what I ended up doing earlier today with my problem).

<a class="test" href="Default.aspx">Home</a>

...may do the trick, but if not, I'd suggest getting in reinforcements...if you're not sure of the order of inheritance or things are getting very complex and you're not sure if other styles are conflicting with a style, a great tool for picking which selectors to use are John Allsopp's XRAY and MRI bookmarklets - http://www.456bereastreet.com/archive/200710/css%5Fdiagnostics%5Fwith%5Fxray%5Fand%5Fmri/

Simply drag 'n' drop them onto your browser's bookmark bar. XRAY gives you the element, id and class of any on-screen element you click on, as well as its position and margin, padding and border info, as well as inheritence heirarchy. When you click on any element on-screen, MRI gives you suggested selectors for the element, which you can then copy and paste into your text editor. To activate both you just click on them wherever you've dropped them on your browser, and then a floating overlay appears, which when you click on an element displays all the relevant info about that element. I find both invaluable when I'm having trouble figuring out why a style isn't behaving as I'd expected it to.