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'm currently styling a webpage for user interaction based on tabbing through the page.
Is there a way to style an element one way if the user focuses that element by clicking the mouse, and another way if they tab to it?
I would like to have different styles because I want the elements that get tabbed to bolder than the ones they click on. Trying to make it easier to see where they are on the page.
I know how to accomplish this with javascript, just wondering if anyone has a CSS solution up their sleeve.
Many thanks!
I don't think you can, since the CSS code isn't aware of the way you focused an element, but just know that it has focus in that moment. I guess you have to use a javascript code to accomplish it.
You could use pseudo-classes like this:
a:hover { color: green; } /* hover */
a:active { color: blue; } /* click and hold */
a:focus { color: red; } /* tab to it */
I have a custom cursor for an image map with a lot of hotspots. My cursor works fine in Firefox and Internet Explorer, but Safari returns the default one.
I used code found on other websites. My directory structure is:
index.php > css/main.css > css/images/pencil.cur
Here is my implementation (please note I need the same custom cursor for both normal and a, a:hover and a:visited states:
#gameScreen area, #gameScreen .wrapper, #gameScreen .wrapper a:hover, #gameScreen .wrapper a:visited {
cursor: url("images/rcspencil.cur"),url("css/images/rcspencil.cur"),default;
}
Any ideas?
Here's the most browser-compatible syntax I can think of. There might be a better one with browser hacks but I'd ignore it.
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
I wouldn't think the quotations would prevent it from working, but try it without them. The only other thing I can think of is that your selectors are wrong, like the selectors you've got listed don't include the thing you're hovering over.
Ok I have now virtually fixed our menu system.
The only Issue I have now, seemingly is onclick change menu item state to ACTIVE
So here is the fiddle: http://jsfiddle.net/ozzy/6pxaE/
Essentially, onclick I need the menu item clicked to change to:background color #ec008c and color to #fff with no text shadow. As seen in my Fiddle Above.
Everything else seems to work fine.
Any help appreciated. No JS please
Assuming what you want is to highlight the currently active page in the navigation, I think this is still the easiest way to accomplish what you want.
Would that work?
To make all of your 'active' states pink-ish, the following worked on your last lines of CSS:
.white ul li a:active, .white li a:active{ background-color:#ec008c;color:#fff;display:block;text-shadow: none !important;
}
http://jsfiddle.net/ExUdM/
I only tested this in Chome, Firefox, and IE9
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