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
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.
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)
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 have created a site and it looks great in every browser except IE8, there it appears that the links, when visited shift right and the clickable area migrates away from the text. Is there any easy way to fix this?
Site is online here:
http://serif.cz/clients/bikram/
It appears this CSS rule #fade A:link, A:visited is causing the problem because the 2nd part is applying the rule to all anchor tags.
Change it to...
#fade A:link, #fade A:visited
I have an Html.ActionLink on my page and I am using the following CSS on it to give it an image and try and remove the underlining.....
a.searchButton
{
background-image: url(/content/images/DropAcross.png);
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: block;
text-decoration: none;
clear:none;
}
Can anyone see a problem with this? All the CSS properties seem to work apart from the text-decoration: none, which seems to leave the underline in place.
You would have to look at the rendered html. In Firefox or Google Chrome, right click and choose Inspect Element.
You might find something silly like the searchButton class is being applied to a span that wraps the a tag, in which case, you would get everything working except the link specific rule:
text-decoration:none;
I know that it is old topic, but maybe somebody will considere it helpful -
"text-decoration" attribute, mentioned above, can be passed to ActionLink by construction like this:
#Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})
Setting text-decoration:none; ought to work.
Is it possible that there are some other styles overriding it? Have you looked in Firebug (or similar tools) to see what styles are being applied?
One possible answer may be the :hover, :visited and :active pseudo classes. If they are set to have an underline, then they will override the default style for the element.