a:active not working in FIrefox or Netscape

[tjanson]

Hi all. I would be much appreciative of your help on this. I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one. Works fine in IE, Thanks so much for your input.

Offending CSS:

a.thumbnailuw:visited {
display : block;
border : 2px solid #000000;
}

a.thumbnailuw:hover {
display : block;
border : 2px solid #65ADE7;
}

a.thumbnailuw:active {
display : block;
border : 2px solid #65ADE7;
}

Site I'm applying it to:
http://www.johntorrente.com/index.html

[ALL]

what browsers is this sample not working with?

[tjanson]

Firefox 1.0.4 and Netscape 8.0.4 for Windows

[ALL]

i dont have either one of those in may computer... if i was using my computer i could have done it, but i dont have my computer... i am sorry

-ALL

i am sure somone else can help you!

[Chaoseeker]

any value put on a:active will only be seen as you are clicking on the link.
to achieve your goal you'll need to do something like this:

<ul>
<li>blue</li>
<li id="active">black</li>
<li>green</li>
</ul>

By giving your element a unique name, you can style it using CSS:
#active {
color: blue;
}

[markei]

Originally Posted by tjanson

Hi all. I would be much appreciative of your help on this. I have spent far too long trying to figure out why my a:active css is not working on the thumbnails below the large image when you click on one. Works fine in IE, Thanks so much for your input.

Offending CSS:

a.thumbnailuw:visited {
display : block;
border : 2px solid #000000;
}

a.thumbnailuw:hover {
display : block;
border : 2px solid #65ADE7;
}

a.thumbnailuw:active {
display : block;
border : 2px solid #65ADE7;
}

Site I'm applying it to:
http://www.johntorrente.com/index.html

I see a few things here.

First is that your active color is the same as your hover color, so you would not see any color change.

Second is the CSS coding itself. The way you have it set up will not work correctly even on my IE7 browser and it makes sense to me why it won't, due to your implementation of the css class.

You have used your class in the code to effect only the a tag that has a class of thumbnailuw, but in your code you use the thumbnailuw class for the td tag.

a.thumbnailuw:active means use thumbnailuw as a class of a and only on the :active part. (ie; <a class="thumbnailuw">)

I think what you want is this:
.thumbnailuw a:active which means to affect all the a:active areas within any tag with the thumbnailuw class.

As a better and cleaner use of CSS, you could use the td itself to select what you want and eliminate the need for the class altogether, provided the only td tags you use on your page are for that effect(as on your linked page), you can also eliminate the need to even put the class="thumbnailuw" code on every td and clean up your code considerably.

so your new code would look like this:

td a:visited {
display : block;
border : 2px solid #000000;
}

td a:hover {
display : block;
border : 2px solid #65ADE7;
} 

td a:active {
display : block;
border : 2px solid #65ADE7; /* change this to a contrasting color if you want */
}

OR

If you use more than one table or set of td tags, add an id to the table itself.
Then only all the enclosed tds in that table would be affected.

#thumbnailuw td a:visited {
display : block;
border : 2px solid #000000;
}

#thumbnailuw td a:hover {
display : block;
border : 2px solid #65ADE7;
} 

#thumbnailuw td a:active {
display : block;
border : 2px solid #65ADE7; /* change this to a contrasting color if you want */
}

There's a whole arguement about using CSS and DIVs instead of tables for layout, but I won't go into that here, but the same thing would apply to a div within a div, just replace td with div.

Hope it helps!