problems with hover working in Netscape and FF

rshandy · Jul 14, 2005

I've tried several approaches to get the hover to work in Netscape and FF with no luck - any approach, however,works fine in IE.

Here's the css part:

.backUp
{
color: #999966;
font-size: 10px;
font-family: arial;
}
.backUp a:link {
color: #999966;
text-decoration: none;
}
.backUp a:active {
color: #999966;
text-decoration: none;
}
.backUp a:visited {
color: #999966;
text-decoration: none;
}
.backUp a:hover {
color: #999966;
text-decoration: underline;
}

On the html page I tried:

a) <td bgcolor="#FFFFFF" colspan="4"><A href="#top">Back
to Top</A> </td>
b) <A href="#top>Back to top</A>

Any ideas/suggestions??

Thanks,

Rich

rshandy · Jul 14, 2005

sorry for the typos:

should read:

On the html page I tried:

a) <td bgcolor="#FFFFFF" colspan="4"><A href="#top">Back
to Top</A> </td>
b) <A href="#top">Back to top</A>

BabyJeffy · Jul 14, 2005

Try changing your css to read the following instead:

Code:

.backUp a
{
    color: #999966;
    font-size: 10px;
    font-family: arial;
    text-decoration: none;
}
.backUp a:hover
{
    text-decoration:underline;
}

And use option (b) in your post above.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

rshandy · Jul 14, 2005

Hi Jeff:

Thanks for the post. No effect in NS or FF. I assumed you wanted me to delete the lines:

.backUp a:link {
color: #999966;
text-decoration: none;
}
.backUp a:active {
color: #999966;
text-decoration: none;
}
.backUp a:visited {
color: #999966;
text-decoration: none;
}

What it did do was change the font to default blue (html code "b"), until you rollover and then it changes to my new color and adds an underline.

Can't figure out why it has NO effect in NS and FF??!!

BabyJeffy · Jul 14, 2005

I made the following test page and verified it working in FF and NS (Windows):

Code:

<html>
<head>
<title></title>
<style type="text/css">
.backUp a
{
    color: #999966;
    font-size: 10px;
    font-family: arial;
    text-decoration: none;
}
.backUp a:hover
{
    text-decoration:underline;
}
</style>
</head>
<body>
<span class="backUp"><A href="#top">Back to top</A></span>
</body>
</html>

Maybe something else is over-riding it in your css?

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

rshandy · Jul 14, 2005

You maybe right. I'll check it and let you know
Thanks,

Rich

ChrisHunt · Jul 14, 2005

Is this an XHTML page rather than an HTML one? If so, it's case-sensitive - writing a rule for [tt].backUp a[/tt] won't apply to an [tt]<A>[/tt] element, just an [tt]<a>[/tt] one. I suggest you get into the habit of using lowercase for everything anyway.

If that doesn't fix it, try installing the Web Developer Extension for Firefox. One of the tools allows you to see what CSS is being applied to a particular element - it should pick up if there is some other bit of CSS conflicting.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

rshandy · Jul 14, 2005

Thanks Chris.

I created a new style sheet that only included .backUp, actually renamed to bcktop (all lowercase - I read one of your previous posts)...

And now it works in all browsers!??

Not sure where the conflict is. To test it, I changed the class name again; to backTop ("T" capitalized) it still works in all browsers.

Rich

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

problems with hover working in Netscape and FF

rshandy

Technical User

rshandy

Technical User

BabyJeffy

Programmer

rshandy

Technical User

BabyJeffy

Programmer

rshandy

Technical User

ChrisHunt

Programmer

rshandy

Technical User

Similar threads

Part and Inventory Search

Sponsor