Just doing a little touch up before finishing a conversion project and I have an unwanted border-bottom that needs to be removed.
The base code is:
a:link, a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #c6132e; }
However, I don't want it to show up on all links, particularly the main navigation. When you click on any of the links there it shows up.
On line 56 of the css I placed this code to remove the border-bottom, but it doesn't seem to be working:
ul#main_nav li a:link,
ul#main_nav li a:visited
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none; }
Would appreciate a second set of eyes to look this over and help me find the solution.
Thanks!
BTW: here is the link: http://www.rouviere.com/aav/index.html just click on any of the main navigation buttons.
You missed a comma. Should be:
ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none; }
Your rule is not applying to visited links.
As Timhessel said, it's your focus outline... although this isn't recommended you could add this to get rid of it:
ul#main_nav li a { outline-color: transparent; }
Have you tried using the !important decleration? It may be that your new styles are being overridden somewhere.
ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none !important; }
Also, as noted by #iamtooamazing, you missed a comma after the visited decleration.
Related
I have existing CSS as
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
which works fine
i want to restrict the application only to those anchor items which are part of an <ul><li> item under a div with class="tabs_container"
so this is what i did only to fail !
#tabs_container ul li a:active {
outline: none;
}
#tabs_container ul li a:focus {
-moz-outline-style: none;
}
am i doing it wrong ?
thanks in advance
EDIT
My bad ! actually the ID="tabs_container" not Class.
Further reference : This is part of the tutorial about How to create Tabs using Jquery from Scratch by Erric Berry.
Your element has a class but you are trying to reference it with an ID
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}
Try:-
ul > li > a:active
This should catch anchors which are a child of <li> elements which in turn are children of <ul> elements.
CSS classes are prefixed with a . (dot).
So, try
.tabs_container ul li a:active {
outline: none;
}
.tabs_container ul li a:focus {
-moz-outline-style: none;
}
I'm having an issue on my site http://noahsdad.com; if you look at the widget I installed at the very bottom, you can't see the links unless you hover over them. This doesn't just happen with this widget, almost any I put in have a 'haze' over them, if that makes sense.
I'm wondering if someone could help me figure out what's going on, and how to correct it.
Thanks.
The links are visible, they are just set to a light grey colour. You have these rules defined in your default.css file:
a:link, a:visited {
color: #EEEEEE;
}
a:hover {
color: #999999;
}
You could change the value of the standard link colour, or you create a new rule with a higher specitivity, so that only links in that widget are affected.
#dsq-combo-widget a {
color: #999;
}
Update
You haven't specified the color for your new style:
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #999; <-- Add this
}
Only because of color you can't see it but it's visible. You have a predefined color (#EEE) for all of your "a:link, a:visited" at "http://yourdomain.com/wp-content/themes/ProPhoto_10/style.css" at line 3 and all links are inheriting that color so if you want to change the color for your widgets then add another color like
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #333; /*or whatever you want*/
}
It's at line 345 in the same file.
I'm having an issue when I try to set the visited state, it does not seem to work.
Not sure why this is happening as the hover works but the visited does not. Any ideas why not?
#nav li:visited a{
background:#6b0c36;
}
#nav li:hover a{
background:#6b0c36;
}
what about this:
#nav li a:visited{
background:#6b0c36;
}
#nav li a:hover{
background:#6b0c36;
}
li elements cannot match the :visited pseudo-selector (think about what that would even mean). Anchors have locations that can have been visited, so if you need to change the style on a visited anchor, use:
#nav li a:visited
{
background: #6B0C36;
}
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}
I'm building a Wordpress theme, and I have these snippets in my style.css:
#content a:link, #content a:visited, #content a:hover, #content a:active {
color: #fff;
}
.entry-utility a:link, .entry-utility a:visited, .entry-utility a:hover, .entry-utility a:active {
background: #fff;
color: #111;
}
The problem is that all links, even those within a <div class="entry-utility"> are being rendered with color: #fff". The background selector in the second snippet works fine, but not the color: selector. I've checked, and that is definitely the most granular color selector. What could be causing this?
I've tried commenting out the first one, which does cause the second one to work. As far as I can tell, it's just using the least granular selector for all the links in my theme.
You must put color: #111; in rule that is more precise than #content a like this.
#content div.entry-utility a {
background: #fff;
color: #111;
}