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.
Related
I can't remove underlining from visited links. In my computer, the Fiddle below shows black, underlined text for the visited link in any browser (current versions of Chrome, Firefox and IE).
a:link { color: red; text-decoration: underline; }
a:visited { color: black; text-decoration: none; }
<p>This link is not visited.</p>
<p>This is link is visited.</p>
This is Chrome's inspector for the visited link.
I suspect a:visited being grayed out has something to do with this, but this question about grayed out styles didn't do anything for me, though it helped many others.
These answers (this, this) suggest the spec doesn't care about child elements' text-decoration when their ancestor has it defined, but I don't think this is the case here. My <a>s don't have underlined parents, nor am I using pseudo-elements, but pseudo-classes.
Also, why does Chrome apply a:link to the visited link, if W3C says that
The two states [a:link and a:visited] are mutually exclusive.
Maybe this has to do with user agents hiding private info from websites, like W3C suggests right after the previous quote? This:
Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
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.
The only CSS property you can apply on a:visited links in most Webkit-based browsers (like Safari) or Blink-based (Chrome and Opera) is color. Anything else won't work. It has something to do with browser history stealing. You can read more about it from here:
http://seclists.org/fulldisclosure/2013/May/13
However you can change the style of all links with a {text-decoration: none;}.
The selector itself is not dangerous, but if you combine it with Javascript's functions like getComputedStyle() things can get pretty ugly and by ugly I mean that other users can view and read your personal browser history.
Mozilla (Gecko engine) limited the selector properties to color, background-color, border-*-color.
You still can get the same effect by setting
text-decoration-color
Simply, set decoration color to your background color. Line will still be there, but wont be visible.
For example in a white background page, use:
text-decoration-color: white;
Is there a way to reset visited and unvisited link colours to the browser default after they have been changed?
In my specific situation, I have a main style file containing:
a:link { color: black; }
a:visited { color: black; }
And I would like to have a few specific links rendered with the default colours.
EDIT: Here is a jsFiddle to play with. I would like a style for the default class that makes it match the browser default.
Edit:
Another way is avoiding the problem from the beginning. Give the special links you want to be with the default style a special class (let's call it .default), and instead of:
a:link { color: black; }
a:visited { color: black; }
Use the not pseudo class and write:
a:not(.default):link { color: black; }
a:not(.default):visited { color: black; }
Notice that this pseudo class doesn't work on IE 8 and lower. For them you can use a special CSS (I don't like it, but it'll work).
It is different for each browser.
What you would have to do is get a stylesheet from the browser you are trying to reset (Gecko, WebKit, or Trident) and make that the new default.
Source: Browsers' default CSS for HTML elements
What you're looking for is revert keyword, but it's not yet implemented in most browsers, currently only Safari supports it. The links to track the development per browser are listed in the Browser compatibility section on MDN.
Some day this should work everywhere:
a { color: red; }
a.reverted { color: revert; }
red <a class="reverted" href="#">default</a> red
But for now think about a workaround. The feature is just not there yet.
If that is the only css controlling your a tags then just remove those and that will take off any styling. You could also just change the color?? Like so...
a:link {color: blue;}
a:visited {color: purple;}
Nowadays we can do something like this:
<head>
<style>
:link { color: black; }
:visited { color: black; }
.default-color :link { color: LinkText; }
.default-color :visited { color: VisitedText; }
</style></head>
<body>
<a href='#'>link</a>,
<span class='default-color'>
<a href='#'>link</a></span></body>
The second link renders with default colours.
See: CSS Color Module § System Colors
You can only fiddle with the URL. Browsers record the URLs they've visited. If they're rendering a page, and a particular URL appears in that list, then url is colored as "visited".
You can't force a browser to treat a URL as visited, unless they've actually been there. But you CAN make a visited URL appear as "new" by adding something different to the url, so that it APPEARS new to the browser. e.g.
example.com/foo.php
example.com/foo.php?random=value
both point at the same script, but the browser will treat both as "different". If that random value changes each time, the the browser will effectively think each time it's a brand new url and color it as "new".
I guess one question to ask here is: why? Why would you want to do that in the first place? To my knowledge, there's no W3C standard delineating what default link colors should be, anyways. A value (such as default) for color wouldn't make sense at all, seeing as that the isn't a default value.
With that being said, the most logical way to go about this would to just style things yourself. I'm not sure what situation your in, but whatever the case is, I'm pretty sure you're doing something wrong if you're asking how to restore colors to the browser default. So, before I give you a rather dry solution, I'll ask: can you give us some context? In the case that you're making something like menu bar links and you don't want the same styling for those menu bar links to leak into your normal links, you should really be using some kind of container to select those links in.
Anyways, here comes that dry solution. Most browsers use blue for links, purple for visited links, and red for active links. So, something like the following would work for browsers that go by these colors (assuming that the user hasn't modified the browsers' styling sheet, in which case you may want to learn about that or use something like initial, examined in Itay's answer).
a:link, a { color: blue; }
a:visited { color: purple; }
a:active { color: red; }
enter code herea.class{
color:inherit;
}
Specifies that the color should be inherited from the parent element.
so if your body was color:blue; then followed by a.class{color:inherit} then those examples would be blue. at the same time, you could just use a.class:link{color:blue}. and another for when you visit the link.
Your best with just customizing classes of links of special interest and leaving the rest by default.
No, you cannot set any CSS property to the browser default if it has been changed (i.e., if there is any style sheet being applied that assigns a value to the property. This follows from basic principles of CSS.
So consider asking a different question. There are ways to limit the effect of CSS rules to specific elements, instead of e.g. preventing all links from looking like links.
Just style the ones you want to style by setting a class on them.
.class:link{}
.class:visited{}
Then leave the others default.
You can use this:
a {
color: inherit;
}
That will inherit, and as there is no other link color so the browser will give the link its own style!
I need to assign css that will get "Dusty Arlia" not to underline.
<p>
<span class="published">
By: Dusty Arlia<br />
Published on December 19, 2011<br />
Updated on January 26, 2012
</span>
</p>
I tried using CSS
span.published a:hover {text-decoration:none;}
but that didn't work, so I tried
.published a:hover {text-decoration:none;}
...and more. The CSS is in an external style sheet. I have placed these lines of CSS at the bottom and top of the stylesheet (I think it's at the bottom of the CSS page that gets rendered last). Anyways there is no CSS for the "published" class, but I do have CSS to underline my hyperlinks. I would like the hyperlink for my name not to have an underline. I CAN'T edit my HTML. I have hundreds of pages with this layout. I know I could possible do a "replace all" function if I have to edit the html, but I would like a CSS fix.
if you think the css declaration is being overridden by another stylesheet, you can try saying !important at the end of it, which would override that other style (if it itself didn't already have !important)
span.published a:hover {text-decoration:none !important;}
Your css should work as defined unless some other generic selector is redefining it. Try this:
span.published a:hover {text-decoration:none !important;}
Sounds like you've got some CSS somewhere that's taking precedence over the bit you're adding. If you've got Chrome you can use developer tools to look at all the rules affecting a particular element (right click -> inspect element, look under "Matched CSS rules"). You can do similar with Firebug in Firefox. This should give you the insight you need to fix the problem.
When all else fails, !important can be useful.
I think the problem is, that your a:hover rules are not applied, because your other a selectors have more weight (specifity) and therefore overwrite your a:hover selector.
Eric Meyer has a great article on that subject: http://meyerweb.com/eric/css/link-specificity.html
First of all, make sure your a: selectors have the following recommended order:
A:link
A:visited
A:hover
A:active
To remember this order I always use the LoVe/HAte mnemonic.
By the way, the :hover pseudo class only applies to links which are in hover state (i.e. the mouse is over). Did you also specify the no-underline rules for a:link or a?
If none of that helps you might also try the !important directive. However this should not be necessary at all, but it might help you to figure out where the fault lies.
Here is my code:
.blue {
color:#6E99E1;
font-size:9px;
}
<span class="blue">::CLICK HERE:: to view our New Equipment inventory. <br /><br /></span>
I've somehow triggered something that prevented the <a> tag from inheriting color of parent <span>.
Just an addendum to the other responses, if you want your <a> tags to inherit the colour from their parent you can use
a {color: inherit; }
By default an anchor tag does not inherit attributes like color if an href attribute is present.
Check out the difference between these two on a page:
<span style=color:green>test</span>
<span style=color:green><a>test</a></span>
The following link is to the w3 c:
http://www.w3.org/TR/html401/struct/links.html#h-12.2
User agents generally render links in
such a way as to make them obvious to
users (underlining, reverse video,
etc.). The exact rendering depends on
the user agent. Rendering may vary
according to whether the user has
already visited the link or not.
.....
Usually, the contents of A are not
rendered in any special way when A
defines an anchor only.
This is an answer to the question as well as a reply to Kevin's answer and its comments.
Anchor tags do inherit color, linked or not. The only reason they don't in practice is because they already have their color set in the browser's default stylesheet. The same can be said for the underlining of the link (which, I presume, you didn't notice, because you actually want it or had already changed it yourself).
In Firefox, you can see this in Firebug if you toggle "Show User Agent CSS" (or you can have a look at Firefox's internal stylesheets directly. You can see the browser's defaults in Webkit's Web Inspector and Opera's Dragonfly as well. I don't think you can in IE.
I don't know of any site which has an overview of all browser's defaults. CSS2's "informative" HTML4 stylesheet as well as the YUI reset stylesheet would be a good starting point, but neither of them mention any (link) colors (the HTML4 stylesheet does mention the underline).
To find out which properties are inherited in general, you can use the CSS2 reference property index table (see the "Inherited?" column). SitePoint also mentions it in its CSS reference.
So if you want to make sure your link inherits its color from its parent instead of from the browser's default stylesheet, you would ideally do something like this:
.blue a:link {
color: inherit;
}
You could set it for the different pseudo-classes separately (so :visited, :hover and :active as well), or for the a tag altogether.
However, IE6 and IE7 don't support the inherit keyword, so if you want to support them too, you'd have to set the color explicitly.
I think a doesn't inherit color by default. (certainly it has always worked that way on my sites). Why not change
.blue {
color:#6E99E1;
font-size:9px;
}
to
.blue, .blue a{
color:#6E99E1;
font-size:9px;
}
Firebug will show you exactly which style rules are applied to which elements. It's perfect for this.
(A non-CSS possibility: Do you have link/alink/vlink attributes on your <body> tag?)
Edit: Duh, silly me, the others have it right - <a href> doesn't inherit colour. But Firebug is still a good tool for this kind of problem (even if I'm not. 8-)
In addition to firebug (which should be your first port of call), the IE developer toolbar will also tell you where a given style is sourced from, just in case IE - shock, horror - should be different.
You need to explicitly set the color of the links to override the default blue color.
You are likely seeing the a:visited colouring. Try this:
.blue, .blue:link, .blue:visited {
color:#6E99E1;
font-size:9px;
}
I have set some style for h2 tags (color, font-size, etc.), but when I put "A" tag inside, then style becomes as link. My html:
<h2>
<a class="no-decor" href="http://localhost/xxx/">Link</a>
</h2>
So, as You can see, I've created "no-decor" class. It should inherit h2's style for "a" tag.
a.no-decor {
color:inherit;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
text-decoration:inherit;
}
On Firefox everythig is ok, but IE still shows tag "a" style (underline text-decoration and blue color). I know, I can set some style for "h2 a", but maybe somehow it is possible to force work CSS inherit values on IE7?
P.S. On IE6 doesn't supports too.
P.P.S. There is some example in same way: http://www.brunildo.org/test/inherit.html
No, IE has never supported inherit for any property - sorry. This has been fixed in >= IE8.
Whilst you could use a JavaScript fix to copy the properties from h2 to a, it's probably easiest just to apply the same styling rule to both elements:
h2, h2 a {
font: something;
color: black;
text-decoration: none;
}
You don't need to set inherit on text-decoration anyway, because decoration doesn't inherit from a parent into a child: the underline effect is on the parent and goes through the child; the child cannot remove it (modulo IE bugs). 'text-decoration: none' on the child is the right thing, unless you want potentially two underlines...
try
a.no-decor{
color:inherit;
//color:expression(this.parentNode.currentStyle['color']);
text-decoration:none;
}
That'll get rid of your blue color and the underline. You could use a similar expression for the underline, but you'd be better off just using text-decoration:none since that's all an inherited text-decoration is gonna give you anyhow and no need to use expressions when not absolutely necessary (you'll take a performance hit when using expressions).
A bug's a bug and there's nothing much you can do, short of workarounds.
There's a test for inherit support here.
You can also try to use a script like ie7-js, which "is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser"
Internet Explorer <= 7 versions don’t support the value inherit for any properties other than direction and visibility.