Having Trouble with a:active

[glebreck]

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

 

[ThatRickGuy]

Which Batman? Which Spiderman?

Batman TV show VS Spiderman Movie Sequel = Spiderman
Batman Dark Knight Commics VS Spiderman Cartoon = Batman

IMO, Batman would fit in perfectly in Sin City.

-Rick

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

http://www.ringdev.com

I believe in killer coding ninja monkeys.

 

[ChrisHunt]

Hey, guys, let's all calm down and blame it on Bill Gates.

IE6 interprets [tt]:active[/tt] as it should be interpreting [tt]:focus[/tt] (which it ignores). "Active" sounds like a plausible pseudo-class name for "the link that's currently highlighted", so it's easy to see how the mistake was (and is) made. It's still wrong though.

If you want links to change colour as you tab through them, you're going to need to apply a rule both to [tt]:focus[/tt], which is the right pseudo-class, and to [tt]:active[/tt], which isn't (but IE thinks it is). Much of the time we'll want the same colour for focus, active and hover, so it's not a big issue:

a:active,a:focus,a:hover {
   color: red;
}

If you want to make the link change to a different colour when you click on it, as a present for visitors with working browsers, you'll need to hide it from IE:

a:focus,a:hover {
   color: red;
}
a:active {
   color: green;
}
* html a:active { /* only IE will apply this rule */
   color: red;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Foamcow]

Nice thread.
I'm desprately trying to think of something to add here that wouldn't get red flagged.
Hmm, fra... nah

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[glebreck]

All right guys. I am the guy who started this and am not as knowledgeable as, but now I am just more confused as to what I do.
my page is

http://www.bestcutfabrics.com

here is my link code:
#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:focus {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #CCCCCC;
text-decoration: underline;
}
#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;
}

I want it to work like this page:

http://www.paumanokreview.com/

When you look at my page it's still being built, but the links I want to work like that are the four columns of categories.

 

[AdaHacker]

glebreck,

Are you sure you want :active? If you look at the CSS for

http://www.paumanokreview.com/

then you'll see that it actually doesn't use :active.

If you're trying to get that effect where the link to the current page is in a different color, you're going about it in the wrong way. If you look at the source to the page you referenced, you'll see that they import the style sheet with the default navbar styles and then over-ride the list item style for just the current page item. In other words, you have to do this on a page by page basis. I don't think it's possible to do in a single global stylesheet.

 

[glebreck]

Well all the links actually just refresh the same page send different values to recordset in the url.

Any tips on how to tell it the selected link?

 

[AdaHacker]

Maybe the same way you determine which values to pass to the recordset? Or by adding a variable to the query string? Perhaps checking the requested URL? The details will depend on precisely how you're creating the page. All you really need to do is find some way to know what section you're on and output the appropriate HTML.

In case you're interested, A List Apart did an article on accomplishing this. Their article uses PHP and more or less static pages, but you might find it interesting anyway.

http://www.alistapart.com/articles/keepingcurrent/

 

[Foamcow]

I'm doing something at the moment with CSS based tabs.
Each tab is simply a styled <a> tag.
I have created a class called "on" that I can apply to different <a> tags on a page by page basis.
All I need to do is write 'class="on"' dynamically into whatever <a> tag is "on" for that page... if you see what I mean.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[CliveC]

glebreck... If you are trying to achieve the effect on having the clicked link stay active, one soulution is to give focus on reload to the applicable menu item. The way you have set up the CSS with a:focus before a:active should mean that it will work the same on IE & FF.

For those following the IE vs FF issue with a:active, this got continued in thread215-1049865. I also provided the promised code which highlights the issue.



Clive

http://tubularity.com

http://PalliativeCareConsulting.org