I'm working in WordPress and I have one part of the site colored and styled like normally but there is a secondary part of the site that is colored in darker styles. I have been able to separate the two's CSS mostly with the use of classes and !important. I am having a spot of trouble in the menu area.
In the majority of the site I have the following when hovering over the menu:
.header-menu li:hover, a:hover {
background-color: #b89230 !important;
color:#fff4d6;
text-decoration: none !important;
And on what part of the site I have:
.page-template-cryptofact-page-php .header-menu li:hover, a:hover {
background-color: #836F38;
}
As it is written above, the .page-template css is taking on the background color hover of the rest of the site. If I !important the css of the page-template, then the rest of the site takes the coloring effect instead, regardless of its own !important style.
I've tried removing !important postscript from both, swapping either one, and adding it to both and I still cannot get them to act on their own. I was hoping that designating .page-template-cryptofact-page-php would be enough, since it seems enough for all the rest of the styling.
When I open to inspect the element in source, all of either .header-menu or .page-template-etc is grayed out leaving the a:hover as the instigator on either problem.
I'm fairly new to the nuances of CSS, so if someone could explain why this is happening I would greatly appreciate it.
I would post the site but it is insecure so it would not be a good idea. I can post screenshots or any other information you need.
Here I have placed a couple images:
I'm making a bit of an assumption here as to what your problem is, because I'm not 100% sure what you've got going on, but I believe you are mis-using the , in your selectors.
The comma breaks up totally distinct selectors, so if you want to style certain elements under a certain class, you would need to include that class on both sides of the comma, so you should end up with something like this:
.header-menu li:hover, .header-menu a:hover {
background-color: #b89230;
color:#fff4d6;
text-decoration: none;
}
.page-template-cryptofact-page-php .header-menu li:hover,
.page-template-cryptofact-page-php .header-menu a:hover {
background-color: #836F38;
}
Removing the !importants is probably a good idea... they usually make things more difficult to maintain.
I'm getting really confused here with my stylesheet. I have a lot of specific link styles in my sheet, and for some reason randomly one of them will get overridden by something else when I check the page with Chrome Dev Tools or Firebug. After fiddling around with !important cases and realizing that they are slowly making my code absolutely terrible, I've removed them all and am trying to figure out how to organize my link style to get all the right styles in the right places without them being overridden.
Basically I have like so:
.newlinks a {
some styling}
.dl a {
some styling}
.abclink a {
some styling}
And .newlinks is getting the "some styling" from ".abclink a". I'm really confused why this is happening if the class has a specific name and not just like "p" or something. Any explanation would be helpful! Thank you!
edit: here is the order of the html
<div class="newlinks"></div>
more of the page..
<div class="abclink"></div>
<div class="dl"></div>
I could post the longer code if necessary, I just thought it might be a general issue with my ordering or wording or something.
editedit: here it the relevant css/html in a jfiddle
http://jsfiddle.net/Ub6er/
as you can see in the jsfiddle, the link in "underrighttext" is getting the style from .dl :(
The reason underrighttext is being styled like dl is because of how you've declared your CSS for dl:
.dl a, a:active, a:visited {
...
}
This selector, which I copy-pasted from your JSFiddle, will apply to all a in dl, but also to all a:active and a:visited. Not just the a:active inside of dl!
You need to fix your selectors for the active and visited state to be like this:
.dl a, .dl a:active, .dl a:visited { ... }
Right now, your active and visited links are just being styled with whatever was the last style parsed by the browser.
I've updated your jsfiddle with the correct CSS selectors. It should work now as you expect it.
I have this CSS code for links on my site:
a { text-decoration:none; color:#2B5384; }
a:hover { color:#F90; }
a:visited { color:#2B5384; }
It works fine if the link looks like that: My page - the color of the link is dark blue, on hover it changes to orange and the underline appears.
However, if I link to external website, for example My page - on hover the link doesn't change the color and no underline appears. It works if I change the URL to have the .html extension - My page, but, obviously, there's no such page.
Why is it happening and how can that be fixed?
see http://www.w3schools.com/css/css_pseudo_classes.asp especially the notes :
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.
Here's the official w3c take on it http://www.w3.org/TR/CSS2/selector.html see section 5.11.3
I'm trying to stop Firefox from adding an outline when links are clicked or followed (a:active).
I don't want to get rid of the outline on a:focus, because as we all know that's a kick in the nuts for keyboard only users.
In theory, the following should work:
a:active { outline: 0; }
But it does absolutely nothing in Firefox 3.5.3
The only thing that does work is:
a:focus { outline: 0; }
But as said, that's no good for accessibility reasons.
Is there any way at all of only removing the outline when links are clicked? My fear is that when you click on the link, you are in effect focusing it, and it's the focus style that's being applied, but focusing and clicking should really be two separate events.
Here you go.
http://sonspring.com/journal/removing-dotted-links
or try this one.
http://www.elctech.com/snippets/css-remove-dotted-outline-border-from-active-links
:focus {outline:none;}
::-moz-focus-inner {border:0;}
When we use Text Replacement using CSS and give a negative test-indent i.e. text-indent:-9999px. Then when we click on that link the Dotted line appears like in the sample image below. What's the solution for this?
For Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
You can use the CSS property "outline" and value of "none" on the anchor element.
a {
outline: none;
}
Hope that helps.
For Internet Explorer 9:
a:active, a:focus {
outline: none;
ie-dummy: expression(this.hideFocus=true);
}
Source: http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a
Please note that the focus styles are there for a reason: if you decide to remove them, people who navigate via the keyboard only don't know what's in focus anymore, so you're hurting the accessibility of your website.
(Keeping them in place also helps power users that don't like to use their mouse)
There is the same border effect in Firefox and Internet Explorer (IE), it becomes visible when you click on some link.
This code will fix just IE:
a:active { outline: none; }.
And this one will fix both Firefox and IE:
:active, :focus { outline: none; -moz-outline-style: none; }
Last code should be added into your stylesheet, if you would like to remove the link borders from your site.
include this code in your style sheet
img {border : 0;}
a img {outline : none;}
I hope this is useful to some of you, it can be used to remove outline from links, images and flash and from MSIE 9:
a, a:hover, a:active, a:focus, a img, object, embed {
outline: none;
ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */
}
The code below is able to hide image border:
img {
border: 0;
}
If you would like to support Firefox 3.6.8 but not Firefox 4... Clicking down on an input type=image can produce a dotted outline as well, to remove it in the old versions of firefox the following will do the trick:
input::-moz-focus-inner {
border: 0;
}
IE 9 doesn't allow in some cases to remove the dotted outline around links unless you include this meta tag between and in your pages:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
This is the latest one that works on Google Chrome
:link:focus, :visited:focus {outline: none;}
in order to Removing The Dotted Outline href link you can write in your css file:
a {
outline: 0;
}
If the solution above doesn't work for anyone. Give this a try as well
a {
box-shadow: none;
}
-moz-user-focus: ignore; in Gecko-based browsers (you may need !important, depending on how it's applied)
Use Like This for HTML 4.01
<img src="image.gif" border="0">
You can put overflow:hidden onto the property with the text indent, and that dotted line, that spans out of the page, will dissapear.
I've seen a couple of posts about removing outlines all together. Be careful when doing this as you could lower the accessibility of the site.
a:active { outline: none; }
I personally would use this attribute only, as if the :hover attribute has the same css properties it will prevent the outlines showing for people who are using the keyboard for navigation.
Hope this solves your problem.
I'm unsure if this is still an issue for this individual, but I know it can be a pain for many people in general. Granted, the above solutions will work in some instances, but if you are, for example, using a CMS like WordPress, and the outlines are being generated by either a plugin or theme, you will most likely not have this issue resolved, depending on how you are adding the CSS.
I'd suggest having a separate StyleSheet (for example, use 'Lazyest StyleSheet' plugin), and enter the following CSS within it to override the existing plugin (or theme)-forced style:
a:hover,a:active,a:link {
outline: 0 !important;
text-decoration: none !important;
}
Adding '!important' to the specific rule will make this a priority to generate even if the rule may be elsewhere (whether it's in a plugin, theme, etc.).
This helps save time when developing. Sure, you can dig for the original source, but when you're working on many projects, or need to perform updates (where your changes can be overridden [not suggested!]), or add new plugins or themes, this is the best recourse to save time.
Hope this helps...Peace!
I would bet most users aren't the type of user that use the keyboard as a navigation control. Is it then acceptable to annoy the majority of your users for a small group that prefers to use keyboard navigation? Short answer — depends on who your users are.
Also, I don't see this experience in the same way in Firefox and Safari. So this argument seems to be mostly for IE. It all really depends on your user base and their level of knowledge — how they use the site.
If you really want to know where you are and you are a keyboard user, you can always look at the status bar as you key through the site.
This works perfectly for me
a img {border:none;}
Any image that has a link will have a border around the image to help indicate it is a link with older browsers. Adding border="0" to your IMG HTML tag will prevent that picture from having a border around the image.
However, adding border="0" to every image would not only be time consuming it will also increase the file size and download time. If you don't want any of your images to have a border, create a CSS rule or CSS file that has the below code in it.
img { border-style: none; }
Yes we can use. CSS reset as a {outline:none} and also
a:focus, a:active {outline:none}
for the Best Practice in Resetting CSS, The Best Solution is using common :focus{outline:none} If you still have Best Option please Share