The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6.
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;)
Any ideas on why this is happening and how I can fix it appreciated.
The complete styling for the nav below:
.side_nav
{
text-align : left;
margin-left: -10px;
}
.side_nav ul
{
list-style-type: none;
list-style-position:inside;
margin-left:0px;
}
.side_nav li
{
margin-top: 10px;
display: list-item;
list-style-type:none;
}
.side_nav a, .side_nav a:visited
{
text-decoration: none;
color : #9F1F63;
font-weight : bold;
padding: 5px 10px 5px 10px;
}
.side_nav a:hover
{
color:#B26D7F;
}
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML.
<div class="side_nav">
<a class="active" href="Page1.aspx">Page1</a><br />
Page2<br />
Page3<br />
</div>
In IE6, it matters which order you specify the anchor links. You should specify them in this order to achieve the intended result: first a:link, then a:visited, a:hover and a:active.
Your CSS has a period where there should be a colon, in .side_nav a.active (should be .side_nav a:active
With this fixed, it works for me in IE6.
I tried copying your code, and the format did work.
Your problem is you see the link as visited - you have both formatting of the visited and active (so you have the purple background and the purple text).
You should override the color for visited links with the active class:
.side_nav a.active, .side_nav a.active:visited
{
color: #FFFFFF;
background-color: #9F1F63;
}
Try adding a more specific selector to .side_nav a.active such as div .side_nav a.active where div is the parent element.
The color is probably being overwritten from the .side_nav a rule.
Also, you may have a typo - are trying to use the :active selector?
Try to use !important. Like this:
.side_nav a.active
{
color: #FFFFFF !important;
background-color: #9F1F63;
}
Related
I am trying to style a nav link to be a certain color when I am on that page.
HTML:
<nav>
<ul>
<li>Portfolio</li>
</ul>
</nav>
CSS:
nav a.selected {
color: #000;
}
The above code works. But if I removed the nav selector and just used
a.selected {
color: #000;
}
then the code doesn't work.
What if I wanted anywhere that I have an anchor element with a class "selected" to have #000?
The problem here seems to be the specificity of your selector.
Meaning:
nav a.selected {
color: #000;
}
Is not as exact as:
nav ul li a.selected {
color: #000;
}
Which holds more significance than the above.
So in order for your a.selected to work, You need to remove the nav before it, making it a global modulator just as the color you applied to your global anchor modulator, or apply the more specific selector from above (the second block):
a {
color: #6ab47b;
}
a.selected {
color: #000;
}
As a learner, I suggest You try and stick to the Mozilla Developer Network (MDN) Almanac.
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
I am in the process of replicating the Google homepage (for practice) and am running into a few problems.
Here is my jsfiddle: http://jsfiddle.net/sdaless/kTn7j/
I am trying to make my text color: white, and text-decoration to none. No matter where I put these two commands, they do not change. I don't know if I am having an inheritance issue or what my problem may be. From my understanding, I thought I could put:
color: white;
text-decoration: none;
in either my #nav-container id or #navlist.
Both removing the underline and making the text color white apply to the anchor tag
ul#navlist li a{
color:#fff;
text-decoration:none;
}
try this
#nav-container ul li a{
color: white;
text-decoration: none;
}
DEMO
When making list-based menus, all styling that is not position-related should go on the A-tag, not the LI and use display:block.
You need to change this selector:
#navlist li
To this (target the a tag)
#navlist li a
The text is present inside the anchor tag, hence the css should be applied for the a tag. Try this css
#nav-container {
background-color:#000;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist li a{
color:#fff;
text-decoration:none;
}
check this fiddle : http://jsfiddle.net/Kritika/KnS8s/
I am creating a dropdown menu for a Wordpress template and I want the main menuitem to have the same color the subitems have when they are hovered. I found many similar questions here on stack overflow and tried their solutions but they don't seem to work in my case.
I think the solution must be:
parent:hover child { ... }
and it works for example here.
I tried to do the same with my code (please see last CSS selector) but it doesn't work here.
Update your CSS from:
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
To
#menu ul li:hover a {
background-color: #006699;
}
#menu ul li a:hover {
color: #FFFFFF;
}
Updated example on jsFiddle.
You can get the effect you'd like by replacing the last CSS declaration in your fiddle with this:
.menu ul li:hover > a {
background-color: #006699;
color: #fff !important;
}
I'm trying to build my first site and am trying to use the "a:hover" feature in CSS but can't get it to work - the links look the same whether hovering or not.
Here's a snippet of my CSS file:
/* main page elements */
a:link
{
text-decoration: none;
color:white;
}
a:visited
{
text-decoration: none;
color:FFFFFF;
}
a:hover
{
text-decoration: none;
color:blue;
}
a:active
{
text-decoration: none;
color:blue;
}
Any help appreciated.
Thanks,
Robert.
You need to finnish the text-decoration instruction :P
text-decoration: none;
or
text-decoration: underline;
I hope you need to change the color in hover state
Try something like this one
eg.
HTML
<a href ='#'> Hover Me </a>
css
a
{
text-decoration: none;
color:#000000;
}
a:hover
{
color:#3399FF;
}
Your might be transitioning from a:active to a:hover, which has the same color. Therefore you see no difference. Try setting a unique color for a:hover, and see what happens.
It would also help if you make a jsfiddle.
Your issue is in the text-decoration: parts, if you remove them or use a valid syntax your CSS should work.