2 replies [Last post]
reedja
Offline
newbie
Last seen: 16 years 26 weeks ago
Joined: 2004-05-25
Posts: 1
Points: 0

Hi all

Hopefully a simple one for somebody out there.

My page seems to be ignoring the a:active attributes.

Some simple html code to explain:

<a href="temp1.htm">link 1</a>
<a href="temp2.htm">link 2</a>

If the code was duplicated on temp1.htm and temp2.htm......

I link to an external css with the following decs:

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

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

a:hover { text-decoration: none; color:#CC0000}

a:active { text-decoration: none; color:#CC0000}

BUT, when you click on a link I would expect it to be ACTIVE but no change in colour. It seems to be ignoring my css.

Am I making a big mistake here???

Thanks in advance for any help!

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 3 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Problems with a:active

Hi

I can't be sure, but I suspect the browser is showing your link in the visited color, as that is what it is.

Frankly, I don't think many people use active that much, I certainly don't.

Is this going to be used for a menu?

If so, and you want to make it look a bit prettier, why not look at this example:

http://www.pmob.co.uk/temp/disjointednavlist1.htm

See how the current page is a different color, BUT, when you use the menu by hovering the mouse, the active page goes back to normal color and only the menu item hovered over is highlighted. This is very difficult to do, and quite cool.

Trevor

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 2 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Problems with a:active

Some get 'active' confused thinking that if they click on the link and move to that page then the link should be active. That is not the case.

active is the same as focus and I actually use it as thus a:active:focus {....

It is used for tabbing purposes. If I use the tab button, as I tab over the links then they take on the a:active:focus { values. Its use is based on accessibility for people that can not use a mouse, but as that is probably very small, as clevtrev said, many do not put it in.

It is also the same result as you would want if hovering over the link with a mouse, and therefore could be done as below

a:hover, a:active:focus {text-decoration: none; etc

Regards
Day

The only way to learn is to do it yourself