Is it possible to use link a:visited only when it is needed? When i do't use link a:visited it work fine except one or more mobile browsers (one browser). It show violet colored link. When i use link a:visited this selector is superordinate. I created jsfiddle example. I know that i can use a:visited color same as a:link color but what if i want to use more as one links color? It show me all links with color defined in a:visited selector. How i can fix violet colored links on mobile browsers?
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.
The site I am working on: http://www.GreenvilleOsaka.com/
I am trying to highlight the current page the user is on, but my rule as seen below only seems to disable highlight color causing the link to retain its normal color:
.current-menu-item a:link {color:#FFFFFF;}
Oddly enough, when I inspect it with Google Chrome, it changes to the hover color (grey) but the inspector matched CSS rules shows white (the correct color), and even weirder, the computed styles shows the original link color (gold).
If I open inspector some other way then walk to the current menu item, it stays the wrong color (normal, gold) but the inspector shows the correct color (white) in both computed and matched CSS rules.
Any help would be appreciated!!!
(Inspecting in FF with FireBug shows correct colors while the is gold)
Change your css from
.current-menu-item a:link {color:#FFFFFF;}
to
.current-menu-item a {color:#FFFFFF;}
Below are two links on where the underline is somewhat blueish and the other is the same color as the text
with the following code html <font color="#003300"> CLX qualifications...</font></a>
and I'm having trouble replicating how links are rendered in Quirks Mode when I want to render my page in IE standards. This is also happening to my links when, I run my page in firefox as well.
It looks like the font color is overriding the default a:visited style. This CSS should work for your needs:
a, a:hover, a:visited {
color: #003300;
}
Here is a demo (also you can drop your use of the font tag which is alwasy a good thing)
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 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