a:visited Not Working In Firefox
Oh boy, this took hours of pulling my hair out trying to determine why a:visited was not working on a new theme when viewing in Firefox but was totally fine in IE. Here’s a tip:
Make sure your Firefox isn’t set to “0″ days in Tools => Options => Privacy
If it is, Firefox ignores the a:visited styles.
Found the answer on thescripts.com.
Ridiculous amounts of time were wasted because of that setting. Who knew.
If that isn’t it, make sure the link order in the CSS file is:
a:link
a:visited
a:hover
a:active
Asa Dotzler:
September 30th, 2007 at 1:49 pm
How would you propose a browser know which links to treat as visited without storing a list of visited links — history?
- A
Terry:
September 30th, 2007 at 5:22 pm
I don’t know Asa, IE handles it fine (I have it set to wipe everything when I close the browser). Maybe it is the history?
Asa Dotzler:
October 3rd, 2007 at 4:40 pm
Terry, if IE is showing you visited links as highlighted then it is not wiping everything clean when you close it. There is simply no way, short of magic, for the browser to mark your visited sites as visited if it doesn’t maintain a list. I guess IE figures you won’t mind if they keep around your data even if you explicitly tell them to remove it. At Firefox, when you clear or ask us not to keep data around, we actually listen.
- A
Terry:
October 3rd, 2007 at 9:22 pm
Asa, this is confusing to me because I don’t understand the mechanics of it all. But I have no problem with a browser retaining my surfing history during the current session.
Rapha:
November 13th, 2007 at 10:04 am
Dear Terry.
Thx a lot for your article!
In my Firefox (v2.0.0.9), “Tools > Options > Privacy” is set to 9 days, and the order of the anchor-behaviour (:link, :visited, etc.) in the external CSS-file is correct – But the “:visited”-property is not working anyway in Firefox – I dont have any idea why..
How ever, here is a possible workaround.
Instead of using the built-in features of a browser, I (re-)define the name of the class which shall be used by a a-tag after a link was clicked. The different class names are implemented in CSS and a part of the website:
The changing of the name of the class is implemented in Javascript:
Then you have the define the onmouseup-behaviour of a a-tag:
Anchor #0
Please note that the parameter of the function call (in my example:0) must apply! So the first anchor calls with a “0″, the second one with a “1″ and so on. This is because Javascript enumerates webpage-elements starting with 0
I tested this in Firefox and in IEx (v7.x), it seems to work fine.
Best regards from Switzerland!
Rapha
Rapha:
November 13th, 2007 at 10:12 am
Oh dear..
I didnt expect that my source code will be removed
CSS:
a
{
color : blue;
}
a.visited
{
color : silver;
}
Javascript:
function AnchorOnMouseUp ( AnchorId )
{
document.all.tags(“a”)[AnchorId].className = “visited”;
}
Onmouseup-behaviour:
onmouseup = “javascript:AnchorOnMouseUp(0);”;
Regards,
Rapha
Tom:
July 2nd, 2008 at 12:52 pm
Thanks – spent the last hour trying to figure it out – you’re a life saver!