visited links won't underline

Question

My visited links for a web project won't underline, however, the rest of the visited modifications are working, and underline is working for hover. I showed my instructor this and he was confused, and said he would try to find time to look at it, however, the due date is nearing si I can no longer wait. Here is my the section of my layout page dealing with the anchor tag:

a:link
{
    text-decoration: none;
    color: #d1bd22;
    font-size: 1.3em;
}

a:visited
{
    text-decoration: underline;
    color: white;
    font-size: 1.3em;
}

a:hover
{
    text-decoration: underline;
    color: #d1bd22;
    font-size: 1.3em;
}

a:active
{
text-decoration: none;
    color: white;
    font-size: 1.3em;
}

Here is a link to my website:

http://cis.luzerne.edu/~ds0002/morlansfamousshop.html

Refrain from posting links to external websites. Use jsfiddle to post the relevant HTML to show your problem. — Kermit, Dec 17 '13 at 17:26
Looking at a JS Fiddle I have created the rule *is* being applied in Chrome, but not visually. If I add an identical inline property the underline appears as expected. I am only speculating at this point, but could it be a browser restriction following the CSS browser history leak stories a couple of years back? Colour changes without any problem. — pwdst, Dec 17 '13 at 17:44

score 4 · Accepted Answer · answered Dec 17 '13 at 17:54

Hat tip to @pwdst for spotting this.

See this documentation for Firefox. Similar rules apply to Chrome.

Since JavaScript can read the styles applied to an element (as well as other elements, and the computed styles of the same), allowing changes to a link when it is :visited can reveal information about what others sites a person has visited.

In order to protect users' privacy, browsers limit which properties can be changed by :visited and text-decoration can not be altered.

See also: The Selectors specification which blesses this behaviour:

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

As often is the case on Stack Overflow, beaten to "the kill" on the answer. Thank you for the credit. — pwdst, Dec 17 '13 at 18:06
Thanks that did it, I changed visited to stay undecorated as it was doing, and hover and active now have the underline property — KingDave212, Dec 17 '13 at 18:16

score 3 · Answer 2 · answered Dec 17 '13 at 17:56

I was correct in the surmise in the comments. If you create a test example (in JS Fiddle or a test HTML file) then the property is being applied when you inspect in Dev Tools, but cannot be seen visually. Why is this?

There were several stories about users privacy being compromised by malicious sites adding links (often hidden) to their pages, and then using the :visited pseudo class to determine if the user had visited the URL or not.

As a result the Mozilla Developer Network states-

Note: For privacy reasons, browsers strictly limit the styles you can apply using an element selected by this pseudo-class: only color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke. Note also that the alpha component will be ignored: the alpha component of the not-visited rule is used instead (except when the opacity is 0, in that case the whole color is ignored, and the one of the not-visited rule is used.

Though the color can be changed, the method getComputedStyle will lie and always give back the value of the non-visited color.

For more information on the limitations and the motivation for them, see Privacy and the :visited selector.

See https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

The fact that the colour property was being applied was also only half true, in that it is reported as applied and visually present - but the getComputedStyle method will lie and return the colour as if the rule was not applied.

As a result malicious webmasters can no longer determine websites you have been visiting using this technique.

This is the right answer IMO. Also see a related thread. http://stackoverflow.com/questions/8331688/why-doesnt-this-avisited-css-style-work — khollenbeck, Dec 17 '13 at 17:57
Another thing to take note of. If I run this fiddle both in normal incognito mode vs browsing mode the correct background color displays. http://jsfiddle.net/5sppR/2/ — khollenbeck, Dec 17 '13 at 17:58

score -1 · Answer 3 · answered Dec 17 '13 at 17:30

-1

I believe the reason this is happening is precedence.

Because you've defined a:link before the others, and the others aren't adding any additional weight, the first definition is being used by the browser.

Try putting the a:link at the end and it should work as expected (since only the specific hover and visited will match the previous definitions)

answered Dec 17 '13 at 17:30

Donovan

15,917
4
22
34

1

Although the rules are equally specific, the later rule should override the first - additionally, using the a:link styles isn't what is happening in practice. – pwdst Dec 17 '13 at 17:44
The a:link style is exactly what is being applied (based on the OP) – Donovan Dec 17 '13 at 17:49
This isn't what was happening, although I will grant you it may have *appeared* to be what was happening. None-the-less basic CSS knowledge should have suggested this isn't the correct answer. – pwdst Dec 17 '13 at 18:00

visited links won't underline

3 Answers3

Linked

Related