My HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Make all anchors and variations plain black text color */
a,
a:link,
a:hover,
a:focus,
a:active,
a:selected,
a:visited
{
color:#000000;
}
</style>
</head>
<body>
This is a visited link that is puple
</body>
</html>
When I visit this page, and click on the link, the text color is purple like the default color of a visited link. How can this be? How can I make the <a> text black in all circumstances?
This reproduces in Chrome and IE9; haven't bothered to test anything else yet.
Remove a:selected from your css definition. That fixed it for me. Never heard of :selected. Is it documented anywhere?
Because a:selected doesn't exist. Remove it!
Removing the a:selected, seems to fix it. Not sure why as that is a valid option on the anchor tag.
Correction: a:selected isn't valid but a.selected is of course valid. Sorry about that, but either way removing a:selected will fix the issue.
Fiddler Example
Related
i want to change color of all my link on the page but it won't work on chrome, works fine on opera. i don't get what's going on can you help me make it work on every browser ??
a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
some textOirase
some textthe mountainssome more text
</p>
</body>
Styling anchor links can be a bit tricky. There are several pseudo classes along with the basic a tag selector that can be used for styling that affect links based on their state.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div>This link starts out blue.</div>
<div>This link *might* be violetred in your browser.</div>
<div>So might this.</div>
<div class="special">Hovering will turn the links aquamarine.</div>
<p>This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</p>
If you ever visited one of the links in your code snippet on your Chrome browser (but not Opera) it will have a different color.
Most likely one or two of the links in the code snippet I provided will already have a different color for you because you visited one of those sites in the past.
To achieve a consistent result, explicitely set both :link and :visited and be mindful of selector specificity.
You can use :any-link to achieve consistent results, which is effectively the same as :link,:visited but keep in mind that not all browser support this newer pseudo-class yet and it has the same base specificity, so it needs to be declared last (This is the reason why the rule in the code snippet is only applied to the last link).
I'm working on this site: http://amberdreams.com
This is a pretty simple site, and I've been using netrenderer.com to make sure that all the pages work in Internet Explorer.
Despite my best efforts, I have not been able to remove the blue border around the facebook and twitter links on the home page for this site when viewing it with Internet Explorer 9.
img {border: none; }
a img {border: 0px; }
I've tried variations of the code above, and it successfully removes the blue border for every version of IE except 9. Any ideas?
Try this in your CSS, worked for me.
img {text-decoration: none; border: 0px}
Try the following instead in your css:
border-style:none;
That should remove your border issue.
I think that should be fine.
You might want to clear your cache and try again...
If not maybe try:
a{border:none}
Visibility of the border around links depends on user settings in IE. Set A {text-decoration: none; border: 0px}.
It seems, that your video-object is not loaded in IE.
Here is great post on removing outline with separate remark about IE9:
George Langley wrote in to say that IE 9 apparently doesn't allow you to remove the dotted outline around links unless you include this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
//Add to your CSS
* {-ms-box-sizing:border-box;}
img {outline-style: none;}
//Add to your HTML
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
in my case the working code (generated by mailchimp and added a rule for 'a') was:
img,a img,a{
border:0;
height:auto;
outline:none;
text-decoration:none;
}
so it is an assumption of other answers
The best way is to add a CSS attribute
a:link, a:visited { text-decoration: none}
If you want to change colors when you hover the mouse, add
a:hover {color: x } // x = the color of your choice
We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being displayed because the a:link background property overrules it.
I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<style>
a:link {
text-decoration: underline;
color: #066E37;
background: transparent;
}
</style>
</head>
<body>
<a class="ui-icon ui-icon-trash" href="#"></a>
</body>
</html>
I don't see a real solution there, but I can offer two hacks:
Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.
If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).
The following selector is declared in external stylesheet
p:first-letter
{
color: red;
}
But it doesn't make the first letter in <p> element turn red. It does work when this is declared in internal css.
Yes it can.
What you wrote should work just fine; are you sure you are linking to the external stylesheet correctly?
This works perfectly fine for me in Firefox 3.6.x:
external-selector.htm
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="external-selector.css" type="text/css">
<style type="text/css">
p { color: blue; }
</style>
</head>
<body>
<p>Paragraph!</p>
</body>
</html>
external-selector.css
p:first-letter {
color: red;
}
output
I had this problem as well, and after over an hour of messing with Firefox I figured out that it's the InvisibleHand addon that is causing this problem for me. When I disabled it, the problem went away.
I have emailed their info email address asking them to fix the bug.
it seems any other CSS is conflicting.
try if it work
p:first-letter
{
color: red !important;
}
I had the same problem described here. I knew the external stylesheet was being applied because I could see other styles being applied. After reading Heptite's answer I decided I'd try updating Firefox. This fixed the problem.
So, perhaps this was a bug that got fixed in the latest Firefox (v39.0)
I know that IE7 doesn't support the value inherit for any CSS properties except direction and visibility. When a browser doesn't support a value, it should simply not apply the given declaration (that particular line). Does anyone know why IE7 doesn't use the first ul a color declaration, instead choosing to use the plain a color declaration? Is it just ignoring the entire ul a rule?
To be clear: in most browsers the first link is red and the second link is blue. In IE7 the first link is red, but so is the second, even though I have at least one declaration it should understand in the ul a rule.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Inherit Test</title>
<style type="text/css">
body {
color: #369;
}
a {
color: #f00;
}
ul a {
color: #369;
color: inherit; /* this should be ignored by IE7, right? */
}
</style>
</head>
<body>
<p>This is testing a red link in a paragraph.</p>
<ul>
<li>here is a link that should not be red</li>
</ul>
</body>
</html>
color isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color and display are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.