Link: cannot change font color with use of focus

[kiwibrit]

I am revamping the club site (http://www.castlehillclub.com) I run for free. All the site, bar the guestbook, is now fluid. More to do - for instance changing the coding of all pages to strict.

But there is one thing driving me slightly potty. Look at the site (bar the guestbook) in a browser such as Firefox where focus causes the hyperlinks to be highlighted. As you go through the nav buttons, they highlight as they should. But I cannot the font to change color - as happens when the mouse pointer is hovered over a button.

I'd be grateful if someone can let me know how to alter my style sheet to achieve the desired result.

The nav buttons live are formed by the sectionLinks id, as follows:

#sectionLinks {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
float: left;
border-bottom: 1px solid #E6E6E6;
width: 80%;
margin-left:0;
margin-top:.5em;
margin-bottom:1em;
}

#sectionLinks a:link{
border-top: 1px solid #990000;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:focus{
color: #0000FF;
background-color:#FFFF66;
}

#sectionLinks ul {

list-style: none;
margin: 0;
padding: 0;
font-size: .8em;
line-height: 1.2em;
}

#sectionLinks ul li {
background-color:#990000;
margin-bottom:.5em;
}

#sectionLinks a:link, #sectionLinks a:visited{
text-decoration: none;
color:#FFFFFF;
}

#sectionLinks ul a:link, #sectionLinks ul a:visited {
display: block;
}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#sectionLinks li {border-bottom: 1px solid #990000;}

/* fix for browsers that don't need the hack */
html>body #sectionLinks li {border-bottom: none;}

#sectionLinks a:visited{
color:#FFFFFF;
border-top: 1px solid #990000;
padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
border-top: 1px solid #E6E6E6;
color:#0000FF;
background-color: #FFFF66;
padding: 2px 0px 2px 10px;
}

#sectionLinks ul li {
background-color:#990000;
}

Everything behaves as it should - except I can't get the font color to #0000FF, specified in #sectionLinks a:focus.

Odd.

I'd be grateful if someone can let me know how to alter my style sheet to achieve the desired result.

[<Eddie>]

These problems are usually caused by inheritence of other instructions.

Move the following code to the bottom of the stylesheet and try that.


#sectionLinks a:focus{
color: #0000FF;
background-color:#FFFF66;
}

[kiwibrit]

Well, that cracked the problem, many thanks.

But I am puzzled how that happened - would you mind expanding a bit?

[<Eddie>]

But I am puzzled how that happened - would you mind expanding a bit?Inheritance is where instructions further down the stylesheet overrule previous instructions. After looking further at the CSS, the likely culprit is:


#sectionLinks a:link, #sectionLinks a:visited{
text-decoration: none;
color:#FFFFFF;
}

This piece of code overrules the one that you moved. Since moving the other instruction, that now has the priority in terms of instructions.

The rule is to be aware of the way CSS commands inherit instructions further up the stylesheet. Once the concept has been understood, it's a fairly straightforward process to maintain order.