I am trying to change the link color of one of my tab buttons but its not working. Its strange because all the other attributes under the same curly braces are working just fine but the attribute clor:#FFFAFA is not working. I have set it against a #778899 background so that the former's snow-white color is visible.
Here's the code.
a:link
{
color:#FFFAFA;
text-decoration:none;
background-color:#778899
}
it is always purple and never changes
Here is the code where I implement it
<dl class="profileTab">
<dd class="profileTabContents">Personal Infomration</dd>
<dd class="profileTabContents">Education, Employment & Activities</dd>
<dd class="profileTabContents">Sports & Athletics</dd>
<dd class="profileTabContents">Entertainment & Attractions</dd>
<dd class="profileTabContents">Philosophy & Society</dd>
</dl>
Well this should be working, but it is probably overwritten by your browser with a default "visited" link color. Change your CSS to:
a, a:link, a:visited {
color: #FFFAFA;
text-decoration: none;
background-color: #778899;
}
It might be because the links are visited.
http://www.w3schools.com/css/css_link.asp
a:link {color:#FFFAFA;} /* unvisited link */
a:visited {color:#FFFAFA;} /* visited link */
a:hover {color:#FFFAFA;} /* mouse over link */
a:active {color:#FFFAFA;} /* selected link */
This is because the link you have opened is stored as visited in the browser.
Delete your history or the links of your page with which you are working from the history will do your work.
Try it. This is the solution.
Works for me - http://jsfiddle.net/ZS2Vn/
That colour is too faint to notice a change from the white background of the page. Try setting a slightly darker foreground colour.
color: #EFEAEA; or color: #DFDADA;
And of course, like others have answered, you should have pseudo selectors for visited, active and hover as well.
I think the problem occurs because you are missing a semicolon on the background-color line.
Related
How do you avoid the annoying grey background that IE 10 applies to anchors when you click them?
There is actually a really easy CSS fix. IE 10 changes the background-color of anchor tags when they are in the :active state. To stop it from happening or to change the colour you can use the CSS rule below.
a:active{
background-color: transparent; /* Can be any colour, not just transparent */
}
Live demo: http://jsfiddle.net/tw16/NtjK7/
On a side note, it's worth mentioning that when styling links you need to ensure that you write the rules in the correct order to ensure that previous styles don't get overwritten:
a:link{} /* 1st */
a:visited{} /* 2nd */
a:hover{} /* 3rd */
a:active{} /* 4th */
I found it was actually :focus that added the grey background.
this worked for me:
a:focus {
background-color: transparent;
}
I haven't been able to find many information but I did found one fix:
Wrap the text of the anchor in a span
Working Solution
If you don't want to change every anchor in your HTML you can use a script like this one:
$("a:not(.dont-use-span)").each(function() {
$(this).html("<span>" + $(this).html() + "</span>");
});
Working solution
Note: just add the class dont-use-span to the anchors that you don't want to modify
After many unfructuous tests, I finally made it works with this :
a {color:#fff; background-color:#f77927 !important;}
a:hover {color:#fff; background-color:#e65e06 !important;}
a.active {color:#fff; background-color:#e65e06 !important;}
a.focus {color:#fff; background-color:#e65e06 !important;}
See in action
I started using bootstrap now and really like it but a problem came up now.
I made an adapted navbar and when a tab is selected, there is a spotted border that I dont like. How can I prevent this border (CSS)?
Can you add some code?
I think somewhere in your CSS you will find something like: border: 1px dotted #ccc; Change that to: border: none;
Depending on what class/id you have it will be something along the lines of:
border:none;
I am going to go out on a limb and assume the HTML for your tab is an . If so, make sure you are explicitly defining the border you want in all of its states (CSS psuedo-classes), specifically :active
a:link {border-width:0;} /* unvisited link */
a:visited {border-width:0;} /* visited link */
a:hover {border-width:0;} /* mouse over link */
a:active {border-width:0;} /* selected link */
http://www.w3schools.com/css/css_pseudo_classes.asp
I am trying to add an icon to all unvisited links on a particular Wordpress category page.
Here is the CSS code I'm using. I have put it at the bottom of my last CSS file.
.category-xyzzy .entry-title a:link {
background-image: url("/new-star.png");
background-repeat: no-repeat;
color: pink;
}
.category-xyzzy .entry-title a:visited {
background: none;
}
The weird thing is that the background image is being added to all links (visited or unvisited) but the pink colour is only being applied to the unvisited links.
This is happening in multiple browsers.
The fact that only the unvisited links are being coloured pink would seem to indicate that my first selector is working properly, but I can't understand why the background image, which appears in the same CSS rule and nowhere else is being applied to all links.
In fact I only added the second rule which matches against a:visited as an attempt to force the issue. The problem occurs whether the second rule is specified or not.
Are you viewing in Chrome? You will probably find that it DOES work in FF. But that will stop soon probably. More here: Google chrome a:visited background image not working
You could add important to your unvisited link.
.category-xyzzy .entry-title a:visited {
background: none !important;
}
It seems that a:visited won't work in showing background color on my links.
http://jsfiddle.net/davestein/D2srA/
What super simple thing am I missing?
The background-color on a:visited only seems to work (as Dave said above, in FF, Chrome and Safari) if the normal a has a background-color, either explicitly defined or through inherit (the direct parent must actually have a background-color for this to be true).
Obviously it is not ideal to have to define a background-color for a all the time, as the site may have a background image.
CSS bug..?
try a) setting a default background color (like #fff) and b)removing !important, as shown here:
http://jsfiddle.net/D2srA/10/
I'm not sure of the technical reason here, but this only seems to work for me if I add a background-color for a:
a {
background-color: #ffffff;
}
a:visited {
background-color: #ff0000;
}
it doesn't work for me if I do it like you do. But if I add every pseudo-class it works. E.g.:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF; background-color:black;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
!important always does the truck
a:active {color:#0000FF !important;}
a:visited {color:#0000FF !important;}
Am using css for some site. I noticed that the a:active style definition in my css file does not work at all. I was told by someone that I have to put the definitions in this order
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}
I have done so but it's still not working. Please could someone tell me why it is not working and a possible workaround. Thanks
Here is a working example:
http://jsfiddle.net/BMHUz/
Click and hold on the anchor tag and you will see it turn orange.
a:active just stay for the few milliseconds you are clicking the link.
May i ask what you expect to see? In case you want a link to be a different color if you are on that page, thats not what a:active is for
If you want a link to be a different style if you are on that page, then you need to use jquery or javascript to change the style of active link.
jquery
$('a[href="' + window.location.href + '"]').addClass('active');
CSS
a.active{
/* your CSS for active link */
}
Put !important to the property if it is already defined to the anchor.
a {
color: white;
}
a:active {
color: black !important;
}