CSS Visited Link Color

[Itshim]

Quick question...

If you have multiple links on the same page, which in essesnce reload the page, except for the fact that you have attached info to the url through the use of '?' does the browser reconize that they are different links?

My problem is, through CSS I change the color of visited links, and if one link is clicked then all links change to the visited color.

The CSS code I'm using is:

a:link { color: #000000; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover { color: #666633; text-decoration: underline; cursor: pointer; }
a:active { color: #666633; text-decoration: none; }

Thanks for any help,
Itshim

 

[ChrisHirst]

and ?

that's how it works.

Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Itshim]

Depending on what value is attached to the url, then the content of the page changes, hence I was wondering if there was a way to tell the brower that they are not all the same link, and to only have the link that was clicked change color.

If I am not explaining this well then let me know and I will try a different way.

Thanks,
Itshim

 

[ChrisHirst]

it's the page in the browser cache not the url that determines visited or not so you have no control.



Chris.

Indifference will be the downfall of mankind, but who cares?

http://www.candsdesign.co.uk

A website that proves the cobblers kids adage.

http://www.cram-system.com

Nightclub counting systems

So long, and thanks for all the fish.

 

[Itshim]

Thank you, I was afraid of that.

Itshim

 

[petey]

Actually, foo.html, foo.html?page=1 and foo.html?page=2 (for example) are different pages as far as the browser is concerned. Visited link hilighting and browser caching should function accordingly. Hope this makes sense.

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Itshim]

I completely understand what your saying, but...(isn't there always one)

I have several links on one page that are exactly what you describe, and it seems when I click on one all all are marked as vlinks.

What I have done now (which isn't really what I want but...) I am using javascript to direct the browser to the page and placing a unique identifier in the href portion. Such as:

<a href="a" onClick="window.location='AW_Deities.php?Culture=African'; return false;">African</a><br>
<a href="b" onClick="window.location='AW_Deities.php?Culture=Celtic'; return false;">Celtic</a><br>
<a href="c" onClick="window.location='AW_Deities.php?Culture=Egyptian'; return false;">Egyptian</a><br>
<a href="d" onClick="window.location='AW_Deities.php?Culture=Greek'; return false;">Greek</a><br>

Now it seems IE6 will only reconize the last link that was clicked as a vlink, if you use the back button, and it does not reconize any as vlinks if you use a link to get back to that page.

Netscape 7.0 and Opera 7.1 simply do not reconize any as vlinks, ever.

Thank you for reply,
Itshim

 

[petey]

Are you loading the pages off your local filesystem or off a webserver? Maybe the browser behaves differently depending on that.

http://www.drpeterjones.com/

News and views of some obscure guy

 

[Itshim]

I hadn't thought of that possibility, but...

I am loadding the pages off a webserver. It is localhost, on my machine.

 

[pauluskc]

Here's your answer holmes...

Identify each link via a class reference. Then you can modify each link independantly and they retain whatever you want until it's clicked. They CSS portion should look like this:

a[b][COLOR=red].link1[/color][/b]:link { color: #000000; text-decoration: none; }
a[b][COLOR=red].link1[/color][/b]:visited { color: #666666; text-decoration: none; }
a[b][COLOR=red].link1[/color][/b]:hover { color: #666633; text-decoration: underline; cursor: pointer; }
a[b][COLOR=red].link1[/color][/b]:active { color: #666633; text-decoration: none; }

a[b][COLOR=red].link2[/color][/b]:link { color: #000000; text-decoration: none; }
a[b][COLOR=red].link2[/color][/b]:visited { color: #666666; text-decoration: none; }
a[b][COLOR=red].link2[/color][/b]:hover { color: #666633; text-decoration: underline; cursor: pointer; }
a[b][COLOR=red].link2[/color][/b]:active { color: #666633; text-decoration: none; }

Then in the A HREF tag you add a class definition, like so:

<A HREF="a" onClick="window.location='AW_Deities.php?Culture=African'; return false;" [b][COLOR=red]class="link1"[/color][/b]>African</a><br>
<a href="b" onClick="window.location='AW_Deities.php?Culture=Celtic'; return false;" [b][COLOR=red]class="link2"[/color][/b]>Celtic</a><br>

Voila! Each link is identified seperately by its own styles and you can change each as desired.

Of course, if you are using some similar attributes to them all, then you should break it out so that they are truly Cascading CSS. So if all the hover is underlined, have a seperate

a:hover { text-decoration: underline; }

etc. but keep the colors to their distinct class references.

Cool? cool!