When I hover over and them move away from active links on my web page I see a box appear around the link. The edge of the box is a series of dots.
I have been trying to see what causes this with Chrome Developer tools but I cannot seem to catch it.
Can someone tell me what is causing this and what CSS can I use to stop it appearing.
I recommend adding this to the active and focus of your a tag.
a:active, a:focus {
outline: none;
}
I think what you're referring to is caused by outline, you can simply use something like
outline:none;
you might be able to replicate this behavior here http://jsfiddle.net/9x46cyfd/
Change focused style for links by adding
a:focus {
outline: none;
}
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 style navbar tabs. I have two pieces of code that work, but I need more control over the individual tabs and not sure how to do it.
These tabs are under the header and at the far right. And I'm trying to round the bottom left corner of only the first tab. The two code snippets below both round the bottom left of every tab in the nav bar.
I'd like to figure out the proper code that would give me control over each tab and allow me to style each tab individually. The 2 snippets below get me halfway there, just not sure which is better to be improved on or what to add.
.custom .menu, .custom .menu a, .custom .menu li ul {
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-bottomright:.0em;
-webkit-border-bottom-right-radius:.0em;}
Or this:
/* Remove the border from the far left. */
ul.menu{border-left:0;}
/* Add the left border back in. If you change the color of the nav border in the WordPress admin panel, you will also have to manually change the left border color below. */
ul.menu li.tab-1 a{
border-left:1px solid #CCC;
-moz-border-radius-topleft:.5em;
-webkit-border-top-left-radius:.5em;}
/* This creates the rounded borders. */
ul.menu li.tab a{
-moz-border-radius-bottomleft:.5em; font-weight:bold;
-webkit-border-bottom-left-radius:.5em; font-weight:bold;
-moz-border-radius-topright:.0em;
-webkit-border-top-right-radius:.0em;}
Thanks for any help
You might be over-engineering here - have you considered using the CSS :first-child pseudoclass? Failing that, how about rounding the bottom left of the <ul> rather than the first <li>? From what you've explained, both of these would achieve your desired results without writing a line of PHP.
What I would do since I generally have a php script of some sort generating the html, is when the html is generated give each tab its own style.
// Assume $menu_tabs contains tab names
echo "<ul>"
foreach($menu_tabs as $tab) {
$tabclass = tabclass($tab) // Just turn it into a valid css class name
echo "<li class='tab $tabclass'>$tab</li>"
}
echo "</ul>"
Or something to that effect.
Then you can just create a css style
.tabclassname {
// Special CSS goes here
}
Alternatively if you are not generating the tabs programmatically. You can just type in a name for each class manually.
EDIT: I mainly suggested PHP because you mentioned wanting control over all of your tabs. If you just want the first tab, then ul:first-child is a good method, or putting the rounding effect on ul as was suggested by Gavin
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