Quote:
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:
Code:
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.
Code:
#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!
to rate their post
