I'm creating a website for a small company. The project was started by an amateur website designer, and I have taken over the project.
Every day I discover new flaws in the css, but now I've something odd, and I cannot find the cause.
The problem is the link on the webshop page of this website: http://o-vita.nl/webshop.php
Beneath "Link naar onze webshop:" there is a link that stays white when I click on it. I cannot find the cause of this in the css...
Since I don't know where the problem lies, I cannot show you the code. You have to find it by viewing the source code of the page.
In the file css.css (which is in the folder "css", which gets redundant fast...):
.footer a:link, a:active, a:focus, a:visited {
color: #FFFFFF;
text-decoration: none;
}
I think the big problem here is how these rules are being referenced. This line:
.footer a:link, a:active, a:focus, a:visited
Basically means:
An a:link in a .footer element
ANY a:active on the page
ANY a:focus on the page
or ANY a:visited on the page.
I'll bet the latter three selectors in that rule should also be limited to .footer, but that's up to you.
In your css.css file, line 249, you have a rule:
.footer a:link, a:active, a:focus, a:visited
{
color: white;
}
Change the color in that line.
.footer a:link, a:active, a:focus, a:visited
Make a:visited an alternate CSS entry with a different color and remove it from here. Like:
.footer a:visited {color:blue}
Also the whole line is wrong as it looks like they are trying to do:
.footer a:link, .footer a:active, .footer a:focus, .footer a:visited
But messaged up the syntax.
Related
I just found this:
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!!
Note: Pseudo-class names are not case-sensitive.
Does this mean that this is INCORRECT?
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
a:hover {
color: #2089CC;
text-decoration: underline;
}
Sadly the source is: http://www.w3schools.com/css/css_pseudo_classes.asp
If you don't know why the 'sadly', please visit http://w3fools.com
Whenever in doubt go to the specs. And here's an excerpt from the specs.
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule
What you have is correct
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
a:hover {
color: #2089CC;
text-decoration: underline;
}
That's why this works.
This below would be incorrect.
a:hover {
color: #2089CC;
text-decoration: underline;
}
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
That's why this doesn't work.
Your proposed way of including a style for each pseudoclass does not allow each pseudoclass to override the last. When you combine the styles like that, then they are simply applied together as a group.
For example, the :active pseudoclass comes last, so that it overrides :focus, or :hover pseudoclasses before it. This makes sense if you think of a link becoming active when clicked and you want a new style to be applied while the user is still hovering over the link with their cursor.
The true order is as follows:
a:link {
⋮ declarations
}
a:visited {
⋮ declarations
}
a:focus {
⋮ declarations
}
a:hover {
⋮ declarations
}
a:active {
⋮ declarations
}
Here is a little reassurance for you.
From the CSS 2.1 specification on dynamic pseudo selectors:
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Interestingly, the current CSS3 draft specification does not seem to mention this (or at least not as clearly).
I have a link on my web page. I have it set to this in the CSS:
a:link {
color:#6F0 !important;
}
However, when you look at it online, it comes up as a purple color. I just can not figure out what I'm doing wrong!
Any help is appreciated...
Thanks,
Michael K.
a:link is only for normal, unvisited links. There are a couple of flavours that you need to take care of, most notably a:visited.
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Since the default style sheet will have a different (purple) color for at least the visited link, I would reset all of them with:
a, a:link, a:visited, a:hover, a:active {
color: #6f0;
}
See also: http://www.w3schools.com/css/css_link.asp
Purple denotes that it is a visited link. Try this:
a {color: #6f0;}
If not, try this:
a, a:link, a:visited, a:active {color: #6f0;}
Use a:visited {} or a:active{}
In Firefox, my website displays the word "open" as blue, yet it is some kind of grey in Chrome.
Firefox computed style
#content a:link #0645AD
style.css?ver=1.2 (line 15)
a #444444 (crossed out)
style.css (line 424)
body #444444 (colored greY)
style.php?ver=1.2 (line 1)
Chrome computed style
#content a:hover - #4E8B4E (only item not crossed out)
#content a:link - #0645AD .sticky-title, p.trigger.active a, span.current, .themecolor, a:hover, .tag-links a:hover, .excerpt, .unitedthemes a:hover, .copyright a:hover, .entry-meta a:hover, .entry-meta-single-post a:hover, #footer a:hover, #footer .lambda_widget_twitter a, #footer .lambda_widget_recent_comments a,
#sidebar .lambda_widget_twitter a, #sidebar a:hover, .widget_recent_comments a, .lambda_widget_recent_comments a - #80B600 a - #444444 a:-webkit-any-link - -webkit-link user agent stylesheet body - #444444
Can anyone explain why this is the case?
UPDATE: Have a solution now, so the website (http://125.7.123.252/) link is now blue
I'm not sure this is what you want but make sure the more specific CSS selector (the one you want) is written below the more general rule you don't want (not only within the same .css document, but if you are using more than one .css file then link to the one you want to take precedence below or "after" other .css stylesheets).
Also it could be an issue with the link already having been visited.
Try this
#content a:link, #content a:visited { color:#0645AD }
instead of just
#content a {color: #0645AD}
Kind of hard to explain, so here's some code.
So I have this CSS, which makes all links an orangish color. It encompases the entire page.
#pageContent a:link,a:visited, a:hover, a:active {
color: #EE4036;
}
And then I have an element of id sideMenu somewhere within the pageContent id,
#sideMenu a:link, a:visited, a:hover, a:active{
color:#58595B;
}
The problem is that for some reason sideMenu's given link color is overwriting pageContent's link color for links that aren't children of sideMenu.
for example, if I had
<div id="pageContent" >
<a>this text should be #EE4036</a>
<div id="sideMenu">
<a>this text should be #58595B</a>
</div>
</div>
sideMenu's <a> text content would get set to the color #58595B as expected, but so would pageContent's, which is what I wouldn't expect.
I'm a bit new to CSS so I feel like I'm missing some super obvious rule and google isn't helping at all. So, anyone know what's going on?
You would need to prefix each selector with the ID:
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color:#58595B;
}
Currently, your selector says match "links that are descendants of an element with ID "slideMenu", links that have been visited, links that are being hovered, and active links".
Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.
Well, you are actually redefining the same rule. You must write down each time the #sideMenu or #pageContent. Here it is:
#pageContent a:link, #pageContent a:visited, #pageContent a:hover, #pageContent a:active {
color: #EE4036;
}
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color: #58595B;
}
Voila. Hope it helps.
Is there a way of specifying a:link, a:visited, a:hover, a:active and maybe also a:focus in one go using css?
If you want to style all anchors; not just anchors used as links, but named anchors as well (i.e. <a name="foo"></a>) simply use the following css selector:
a
That's it.
If you don't want named anchors, but instead want to style only links that have an [href] attribute, you should use the comma-separated list of selectors:
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: blue;
}
If you're running into specificity issues, you'll need to post some HTML code and review CSS specificity.
Just name them all at once and specify the style:
a:link, a:active, a:visited, a:hover, a:focus
{
}
If you specify a single style for all states, you can simply do this:
a{
color: green;
}