Topic: A - Tags: CSS Text Effect Problems

I'm sure there is a simple solution, but I haven't found it yet.

I have a page on a site with 60+ links. I am using the following style (in an external file) to control the <A> in this DIV.

PROBLEM:

I want the HOVER text style to apply to the visited links when you hover over them. It isn't working. They change to the a:visited style and just stay that way. I know the effect I want is possible since the following in document code worked on another site:

<style><!-- a:{color:#000000} a {text-decoration: none} a:vlink{color:#000000} a:hover{color:#FFFFCC} --></style>

Also, the a:active doesn't seem to do anything...why?

***********************************************************************************************

Here is the aplicable section of the style sheet:


div.links table tr td a:link {
text-decoration:none;
color:#990000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
font-weight:normal;
}

div.links table tr td a:active {
text-decoration:underline;
color:#33FF33;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
font-weight:normal;
}

div.links table tr td a:hover {
text-decoration:underline;
color:#0033FF;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
font-weight:normal;
}

div.links table tr td a:visited {
text-decoration:none;
color:#000099;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
font-weight:normal;
}

*********************************************************************************************

THX for your help.

e-maestro

Did you try a:visited:hover? (Just a guess!)

kuckus

I used to have this same problem until the guys here helped me out. You won't believe this, but change the order to:

link
visited
hover
active

It's so simple, it's brilliant. (And confounding why the order trips it up.)




[This message has been edited by Wes (edited 03-28-2002).]

What you want to do is this:

<style ...>
a {general stuff for any anchor tag}
a:whatever {specific stuff for only this kind of behavior on the tag}
a:whatever {specific stuff for only this kind of behavior on the tag}
a:whatever {specific stuff for only this kind of behavior on the tag}
</style>

Most of the problems with the A styles are due to the ordering so try Wes' solution. I believe a:active doesn't yet enjoy wide broser support - check one of the compatibility tables.

Emps

i dont know if this will help, but this is what my code looks like on my site...


a:link{color: 4F4F4F; text-decoration: none;}
a:visited{color: 4F4F4F; text-decoration: none;}
a:active{color: 4F4F4F; text-decoration: none;}
a:hover{color: B5ED1D; text-decoration: overline underline;}

The order Wes mentioned matters.

. . : newThing