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
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.
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.
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)
Related
Is there any reason why this does not work on Internet Explorer or Chrome:
<html>
<head>
<style>
A {font-weight: bold; color:black;}
A:visited {font-weight: normal; color: black; }
.Empty {font-weight: bold; color: black; }
</style>
</head>
<body>
click me
</body>
</html>
The link I click never goes to normal and just stays bold. On some other browsers it works.
Changing case did not affect it. Changing a to a:link did not affect it. Changing color works, just not font-weight.
One workaround was to change accessibility to ignore web colors. I do not have access to the source, so I had to do it this way.
Actually, this has nothing to do with case sensitivity. This is a security feature. The functionality of :visited pseudoclass has been restricted in many modern browsers (Fx4, IE9, Chrome) to prevent CSS exploit: read about it here.
Nowadays, getComputedStyle() in these browsers usually returns values for visited links as if they weren't visited. However, I can simply imagine circumventing of that: using font-weight for visited links, the element's width changes so browsers that would allow changing font-weight for :visited links wouldn't actually fix the security hole.
You can see there are some specific things browsers do to protect against this:
The window.getComputedStyle method, and similar functions such as element.querySelector, will always return values indicating that a user has never visited any of the links on a page.
If you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited.
In rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well.
Thus, there's no workaround for this issue.
One useful attribute that does work with :visited is background-color. So try:
:visited {background-color:red;}
:visited also works on non-a elements.
The problem has to do with history sniffing, changing css properties is disabled for visited links due to privacy issues.
I came up with the following workaround to reach the desired effect.
It is possible to change the background-color of the visited link.
The solution is very simple:
set a background-image on the link with the same height as your link
and 1px width and repeat the image horizontally
the image has the same color as the background of the link
make one pixel of that image transparent, in the vertical middle
on :visited state just change the backgroundcolor of that link to the text-color of the link
Only one line of the background-color wil be visible, because the background-image is masking it
Here's an example:
a:link {
color:#000;
background:#FFF url('../img/linethrough.png') repeat-x top left;
}
a:visited {
background-color:#000;
color:#000;
}
CSS itself is not case-sensitive, but if the HTML file using this style has an XML declaration and an XHTML doctype, that CSS is not going to work, because tags are case-sensitive. You'll have to set the "a" tags to lower-case.
Explained here:
http://reference.sitepoint.com/css/casesensitivity
Perhaps try changing the color attribute and see whether that has an effect at all.
To troubleshoot, you might want to try to utilize the developer tools in chrome to see what style is applied.
You need to have separate declarations for a:link, a:visited, a:active, etc.
Remove your first style that does not contain a colon. It's overriding. Replace with a:link.
Why I am unable to change padding for the visited link? I am trying this:
HTML:
link
CSS:
a{
display: block;
background: green;
padding-left: 100px;
}
a:visited{
background: red;
padding-left: 0;
}
Demo:
http://jsfiddle.net/ZVZWW/
Unfortunately, due to security concerns, the list of styles you are allowed to apply to :visited elements is limited. In the past, hackers have been able to sniff history from users by checking for differences in styles of normal links, and ones the user had previously visited. More on the security concerns here, and what styles are allowed: https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/
As for allowed styles and modifications to :visited elements, here is a what MDN has documented on the subject:
You will still be able to visually style visited links, but there are
now limits on what styles you can use. Only the following properties
can be applied to visited links:
color
background-color
border-color (and its sub-properties)
outline-color
fill and stroke colors
In addition, even for the properties you can set for visited links,
you won't be able to change the transparency between unvisited and
visited links, as you otherwise would be able to using rgba() or
hsla() color values or the transparent keyword.
Only the following properties can be applied to visited links:
color
background-color
border-color (and its sub-properties)
outline-color
Source : - Privacy_and_the_:visited_selector
In the following example, a mouse hover over each link changes the image:
http://www.prism.gatech.edu/~dm257/sprite.html
The trick is the following line of code:
#home a:hover {
background: transparent url('sprite.png') 0px -37px no-repeat;
}
The a:hover selector sets the background to a green part of of sprite.png.
Can I do the same thing with a:visited? Make the icon turn green after the user has clicked it?
I changed a:hover to a:visited and nothing happens.
Styling of :visited is currently limited to prevent security risk related to exposing user's browsing history:
https://developer.mozilla.org/En/CSS/%3Avisited:
Starting in Firefox 4, major limitations to the styles you can apply
using this selector have been introduced. For more information on the
limitations and the motivation for them, see Privacy and the :visited
selector.
The same limitations have been adopted by other browsers, including
Safari 5/4.1 and Chrome 6.
you can accomplish with the help of this plugin - Visited links plugin
Download JS: jQuery.visited.js
See below lins which is related:
set a:visited style with javascript or jquery
Setting CSS pseudo-class rules from JavaScript
You absolutely can. Of course, the :visited state will only be visible upon the next load of the page. Browsers are able to determine whether or not a page has been previously accessed via header information.
Here's a jsFiddle that demonstrates the proper declaration order with helpful comments:
http://jsfiddle.net/fmYdD/4/
I am working with some links and I am using CSS to control their appearence. I have done the normal look and the a:hover look, but I have problems with the a:visited look.
When I try to put the a:visited to change the color when visited, the a:hover stops working and it stops showing the change of colors.
Does anyone know why this happens?
Your a:visited rule is probably after your a:hover rule, and since they have the same specificity, the last one overrides previous ones. Simply move a:hover to after a:visited and it should work. Alternatively, you could decrease the specificity of a:visited by changing it to :visited.
See your probable problem, one possible solution by changing the order, and the alternative solution by changing the specificity.
You could also add !important to the color property (example) but that's not a good idea because it will override even later and more specific ones, plus old versions of Internet Explorer don't support it.
I think you have other problem
look here
its working
http://www.w3schools.com/css/tryit.asp?filename=trycss_link
I've come across an issue lately with my web design projects that has been insignificant enough to slip through my fingers unfixed a few times, but it's just gotten too annoying.
Say I have a style sheet with these rules:
a {
outline: 0;
text-decoration: underline;
}
a:link {
color: #0099FF;
}
a:visited {
color: #0099FF;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #33FF66;
}
Links in my document will only sometimes have the correct colors, but sometimes they will just be the default blue->purple links. I'm on a black background, so these look awful.
If I refresh the page, about half the time they will render correctly. This is happening in both Firefox and Chrome.
What's going on?
If you are currently developing your css, it is very possible that the browsers have a cached version of the wrong version of the style sheet, which would explain why your links don't display correctly.
Try the following :
In your link to the css, add a query string with garbage values. This will force the re-download of the css and see if your rules apply consistently. If they do, then you know it is a caching problem. Leave the query string as is and your users will re-download the css.
If not, then you have a css problem. Download firebug for firefox, check one of the links that doesn't display the right color and see what rules apply to it.
Here is how you would add the query string :
<link rel="stylesheet" type="text/css" href="style.css?v=3">
Of course this is an old post, but I have been experiencing the same issues lately.
After some hours searching, I finally realized that my markup was invalid because using the following syntax:
<i>my link text</i>
This renders perfectly in all browsers but of course the 'a' selector in my style sheet was not enough.
In this case, I needed the following:
a i, a:hover i, a:visited i
{
some rule....
}
Hope this can help someone...
Sounds very odd.
First off I would put a color on your base a to match your a:link and a:visited:
a {
outline: 0;
text-decoration: underline;
color: #0099FF;
}
This should apply to every anchor tag it finds. if you have an anchor tag without an href the a:link wont apply.