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!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Having Trouble with a:active

Status
Not open for further replies.
glebreck

glebreck

IS-IT--Management
Nov 20, 2002
34
US
This is the page: on all the categories i have links set in the stylke sheet but I can not get the a:active to work.
here is the style sheet:
body {
background-image: url(../i/backgroundgrey.gif);
background-repeat: repeat;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper {
width: 750px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
}
#header {
width: 750px;
text-align: left;
}
#cats {
width: 750px;
text-align: left;
}
.whtbold {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: bold;
color: #FFFFFF;
}
.whtsmall {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .6em;
color: #FFFFFF;
}
.whtmedium {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .8em;
color: #FFFFFF;
}
#cats a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .6em;
color: #FFFFFF;
text-decoration: none;
}
#cats a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .6em;
color: #FFFFFF;
text-decoration: none;
}
#cats a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #CCCCCC;
text-decoration: underline;
}
#cats a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #CCCCCC;
text-decoration: underline;
}
.greysmall {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #666666;
}
#fabs {
background-color: #FFFFFF;
width: 750px;
}
#items {
background-color: #FFFFFF;
text-align: left;
width: 750px;
clear: both;
}
.brdRight {
border-right-width: 3px;
border-right-style: solid;
border-right-color: #999999;
}
#homefooter {
background-color: #666666;
width: 750px;
}
#homefooter a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .6em;
color: #FFFFFF;
text-decoration: none;
}
#homefooter a:visited {

font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: .6em;
color: #FFFFFF;
text-decoration: none;
}
#homefooter a:hover {


font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #CCCCCC;
text-decoration: underline;
}
 
Sort by date Sort by votes
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
Click to expand...

Sure looks like a solid understanding to me. /shrug

-Rick

----------------------
[banghead]If you're about to post an ASP.Net question,
please don't do it in the VB.Net forum[banghead]

[monkey] I believe in killer coding ninja monkeys.[monkey]
 
Upvote 0 Downvote
Clive, you sure got some :active imagination running there. I for one have read the article you supplied but nothing in that article mentions that FF has difficulty understanding or rendering :active state. Yet you deduced it and have said it in no uncertain terms as your opening line (which Cory correctly marked as 1000% false):
CliveC said:
a:active does not work in firefox.
Click to expand...
I try to find out where it states that in the article, but so far, you're the only one who claims that. The only thing the article states is that you should use :focus in FF and :active in IE to achieve focus effect (selecting links with keyboard). It does not say that one browser is incorrect or the other correct. It also does not state what exactly :active state should do. Example that was supposed to prove your words proves that you made them up. My example (which comes from people who define web-standards) still holds. And it still supports my explanation. Apology time.
 
Upvote 0 Downvote
I used cLFlaVA's code, copied and pasted into a text editor, and it performs in IE 6 and in Firefox as he said it would (XP SP2).

Lee
 
Upvote 0 Downvote
Why don't you guys stop quoting people and do a simple experiment.
Click to expand...

Ok, here ya go, loaded in firefox 1.0.3:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

a:link {color:black;}
a:visited {color:yellow;}
a:hover {color:green;}
a:focus {color:blue;}
a:active {color:red;}

</style>

</head>

<body>

<a href="[URL unfurl="true"]http://www.google.com">Blah[/URL] Blah Blah</a>
</body>
</html>

My test:
Hovering over the link turned it green.
Tabbing to the link turned it blue.
Clicking the link turned it red.


What's not supposed to work in firefox exactly?

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
I don't see why not and you haven't given me a reason why not (you seem to like to make wild claims w/o giving any reason) However, to give you the benefit of the doubt:

Loaded in firefox 1.0.3
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">

a:link {color:black;}
a:visited {color:yellow;}
a:hover {color:green;}
a:focus {color:blue;}
a:active {color:red;}

</style>

</head>

<body>

<a href="[URL unfurl="true"]http://www.google.com">Google</a>[/URL]
<a href="[URL unfurl="true"]http://www.tek-tips.com">Tek-Tips</a>[/URL]
</body>
</html>
My results:

Hovering over each link turned them green.
Tabbing to each link turned them blue.
Clicking on each link turned them red.
(When performing each action the other link would be yellow)

So I ask again, what is not supposed to work in firefox exactly?

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
Definition of :active + a:active {color:red;} + holding mouse button down on link = Correct opperation in FF.

Kaht, You cannot test the premise with a single link.
Click to expand...

By definition, :active only effects 1 element, so having multiple links should not effect it's performance. If it does, I'd love to know how it's performance differs.

-Rick

----------------------
[banghead]If you're about to post an ASP.Net question,
please don't do it in the VB.Net forum[banghead]

[monkey] I believe in killer coding ninja monkeys.[monkey]
 
Upvote 0 Downvote
vragabond said:
However, I am at a loss what you're trying to prove and why do you wish to debunk Cory's correct thinking.
Click to expand...

Vragabond, I am addressing the originator of this thread and giving him/her a tip based on my experience of running into the same problem.

Clive
 
Upvote 0 Downvote
The reason that you do not see any difference is because you have put a:focus before a:active rather than following the example that I already gave.
Click to expand...
This proves nothing other than you are using poor coding practice when writing your CSS. If you rearranged the order of your link definitions and put a:visited last then none of the other styles would work after you had visited that link. (active, focus, and hover included)

The order I listed above should be the order that you use (with the exception of hover and focus being switched if you'd like the hover style to have precedence over focus)

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
If a:active meant that the color prevailed for just the instance that the mouse was clicked, it would not have much point. You would see the effect better if you opened a link in a new window and noticed that until you changed focus, the 'a link' would reflect the fact that you are in the process of visiting a link.

I do not force people to use my tips.

Clive
 
Upvote 0 Downvote
If a:active meant that the color prevailed for just the instance that the mouse was clicked, it would not have much point.
Click to expand...

That's EXACTLY what it does! And it is a good point. All windows based GUIs use a similar function. When you click on a button, the button face changes. The same with web pages, that's why :active exists.

-Rick

----------------------
[banghead]If you're about to post an ASP.Net question,
please don't do it in the VB.Net forum[banghead]

[monkey] I believe in killer coding ninja monkeys.[monkey]
 
Upvote 0 Downvote
If a:active meant that the color prevailed for just the instance that the mouse was clicked, it would not have much point.
Click to expand...

That is exactly what it means. And of course it has a point. Say for instance you are using images for your links. These images look like regular windows buttons. Using the a:active declaration you could have the image change to a depressed button. It would really not make sense to use a:focus for this behavior because any time you tabbed to a link it would look like you were depressing that button. When you don't want to use javascript buttons on your page, a:active is a great alternative.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
It seems rick beat me to the punch with almost the exact same explanation. Great minds.....

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]
 
Upvote 0 Downvote
All this CSS debate got me thingking...

Who would win in a fight between Batman and Spiderman?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
291
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
623
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
71
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
131
LyndonOHRC
LyndonOHRC
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
120
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top