a hover bug in Firefox?

[Andy]

Hi,

I am using firefox on linux. I am using a simple style for a href as
follows:

.anno_link
{
color: #f90;
text-decoration: none
}

.anno_link:visited
{
color: #f90;
text-decoration: none
}

.anno_link:hover
{
color: #00f;
text-decoration: underline
}

Then I have two links in my HTML page:

<a class='anno_link' target='_self' href='/bookservlet?
hashid=1%2F3%2F491'><span id='stagw17'>WordONE</span></a>

<a class='anno_link' target='_top' href='http://www.yahoo.com'><span
id='stagw20'>WordTWO</span></a>

The problem is that when I visit this page, the internal link
(WordONE) to the same frame is just a plain link with no effects and
is underlined.

But the external link using target='_top' is correct, and is yellow
without an underline until you hover.

It seems to be a problem with frames as evidenced by the different
results (incorrect/correct) with internal/external. But also, when I
refresh the page with location.href javascript, sometimes both are
correct.

Notice the nested span, if I use this css:

a.anno_link
{
color: #f90;
text-decoration: none
}

a.anno_link:visited
{
color: #f90;
text-decoration: none
}

a.anno_link:hover
{
color: #00f;
text-decoration: underline
}

a.anno_link span
{
color: #f90;
text-decoration: none
}

a.anno_link:visited span
{
color: #f90;
text-decoration: none
}

a.anno_link:hover span
{
color: #00f;
text-decoration: underline
}

Then I get even stranger result. The first link is still incorrect
but better. It is yellow decoration, but with a blue underline!

Any ideas?
Andy

[C A Upsdell]

Andy wrote:
> Hi,
>
> I am using firefox on linux. I am using a simple style for a href as
> follows:
>
> .anno_link
> {
> color: #f90;
> text-decoration: none
> }
>
> .anno_link:visited
> {
> color: #f90;
> text-decoration: none
> }
>
> .anno_link:hover
> {
> color: #00f;
> text-decoration: underline
> }

Step 1 would be to make sure that you have the latest version of Firefox
in its generation: e.g. 3.0.11 if you have 3.0.x.

Step 2 would be to make sure that the HTML and CSS are valid.

Step 3 would be to simplify the page by removing anything extraneous, to
determine whether the problem is in what you have cited, or whether the
problem is elsewhere. CSS inheritance rules are complex and can have
unexpected results.