I have css that sets a different color for for hover over a link. It does not appear to be working. Sometime links change color on hover and others do not. It also appears to be dependent on the Browser. It seems to work most of the time in Internet Explorer but it only works about a third of the time in Firefox. I can't seem to see what the problem is. Any ideas would be appreciated.

Here is my CSS

#content a:link {
text-decoration:none;
font-family: Georgia, serif;
font-style: normal;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #00ccff;
}

#content a:hover {
text-decoration:underline;
font-family: Georgia, serif;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #ffff00;
}

#content a:visited {
text-decoration:none;
font-family: Georgia, serif;
font-style: normal;
font-weight: normal;
font-size: 1.0em;
line-height: 1.2em;
color: #00ccff;
}
Yes you can give Font size in em - in fact this is the preferred method according to w3 specifications em is set by the parent element. I believe the default for 1.0em is 16px for all browsers. Of course, ratio could be different if one of the parent sizes changed.

Anyway, I found the problem.

I makes a difference in the order that the elements are defined. I found that I must order them in the CSS according to LoVeHAte

link
visited
hover
active

If they are not ordered in this way, unpredictable results occur.
Edit:

More about em

You are right, this is a circular definition.
1.0em is not so much as circular as it is unnecessary