Having Trouble with a:active

glebreck · Apr 25, 2005

This is the page:

http://www.bestcutfabrics.com/home.asp

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;
}

cLFlaVA · Apr 25, 2005

it works fine. i think you're not seeing what you'd like to see because the page is reloading. if you change the color of an active link to another color, say red, and hold the mouse down on the link and drag off the link, you'll see that active works.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

BillyRayPreachersSon · Apr 25, 2005

"The page cannot be found"

(

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

Vragabond · Apr 25, 2005

I think you don't fully understand how :active works. Besides, your active creates the same state as hover and that's why it is hard to see. Anyway, as Cory already explained, :active is the link that is currently being pressed. This can be seen nicely if your links are dummies (just # in the href) because link will assume that form until you click somewhere else. However, if you reload the page, no link is actually active and they all revert to :link or :visited. Until you push one again. And then you go again.

ChrisHunt · Apr 26, 2005

By the way, you can save yourself a little bandwidth by combining your styles and using the "cascading" part of CSS:

Code:

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

#cats a:hover,
#cats a:active {
    color: #CCCCCC;
    text-decoration: underline;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

CliveC · Apr 26, 2005

Are you using firefox?

a:active does not work in firefox.

You need something like this:

Code:

#menu a:active {
background-color: Cadetblue;
border-right:10px solid Blue;
}
#menu a:focus {
background-color: Cadetblue;
border-right:10px solid Blue;
}

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

cLFlaVA · Apr 26, 2005

CliveC,

your statement is 1000% false. Copy this into Firefox and test it out.

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 { color: red; }
a:active { color: blue; }
</style>

</head>

<body>

<a href="#">Blah Blah Blah</a>

</body>
</html>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

CliveC · Apr 26, 2005

You are not visiting anything.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

CliveC · Apr 26, 2005

Try this and you will see the difference.

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 { color: red; }
a:active { color: yellow; }
a:focus { color: yellow; }
</style>

</head>

<body>
<a href="#">Blah Blah Blah</a>
<a href="#">Blah Blah Blah</a>
</body>
</html>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

cLFlaVA · Apr 26, 2005

now try making that "#" an actual link. no difference.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

Vragabond · Apr 26, 2005

Clive, W3C states that focus should be used before :hover, so :focus should definitely be used before :active for the code to be completely correct. However, I am at a loss what you're trying to prove and why do you wish to debunk Cory's correct thinking. Do you have trouble understanding the pseudo classes as defined by W3C or is it something else? I have never had problem with any of the Geckos recognizing :active state. Also, what is your code supposed to prove if you set the same color for :active and :focus. How do you know which state is focus and which is active? Anyway, here's what W3C thinks about it (example with link element):

:link -- regular link on the page
:visited -- link that was recently visited
:focus -- link that has the current focus (to get focus of an element, try pressing tab -- most browsers will jump through all the links on the page, giving focus to the current
:hover -- link that has mouse cursor over it
:active -- link that is being pressed

I advise you to revise your your example and add a lot more links and also add different colors for all the states. Then observe what is happening to the links when you do actions described above.

CliveC · Apr 26, 2005

The reason that I am using the same color is so that it will work on both IE & FF

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

CliveC · Apr 26, 2005

a:active works in IE but not in FF
a:focus works in FF but not in IE
Perhaps you are misunderstanding what "active" means.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

kaht · Apr 26, 2005

Perhaps you could provide a link or examples to prove this?

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]

CliveC · Apr 26, 2005

I already provided an example. Try the code I gave with a:focus in and then try it again without.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

Vragabond · Apr 26, 2005

W3C said:
The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
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.
The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

This is my source that seems to state the same I said. Let me see your source for claiming otherwise.

CliveC · Apr 26, 2005

http://www.blackwidows.org.uk/wpress/?p=5

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

ThatRickGuy · Apr 26, 2005

Blog VS w3c... hmm

-Rick

----------------------
[banghead]

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

http://www.ringdev.com

I believe in killer coding ninja monkeys. [monkey]

cLFlaVA · Apr 26, 2005

your source is an editorial blog?

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]

trollacious · Apr 26, 2005

My source is NationalEnquirer.com, and they say.....

Lee

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!

Having Trouble with a:active

IS-IT--Management

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor