...

View Full Version : On Focus border removal



quartzy
05-21-2009, 01:45 AM
I am trying to remove a focus link border without success. Can anyone help me?



ul.tabs {
list-style: none;
margin-left: 5px;
padding: 0;
border: none;
font-size: 90%;
}
ul.tabs li {
position: relative;
float: left;
width: 5em;
margin: 0;
padding: 0 4px 0 0;
text-align: center
}
ul.tabs a {
display: block;
width: 4.5em;
padding: .2em;
border: 1px solid #CCC;
border-bottom: none;
text-decoration: none;

}
ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
background: #EEF;
color: #00F;
}
ul.tabs a.active, ul.tabs a:link.active, ul.tabs a:visited.active {
background: #FFF;
color: #00F;
font-weight: bold;
}
ul.tabs a.active {
position: relative;
top: 1px;
}
ul.tabs a:link.focus {border: none;}



The last line I thought would do it, but it does not, I should say this code is connected to a javascript and I wonder if that is affecting the tabs.

VIPStephan
05-21-2009, 02:12 AM
I should say this code is connected to a javascript

And in which way please?





ul.tabs a:link.focus {border: none;}




There is a :focus pseudo-class in CSS. I’m not sure if the JS is adding a regular class called “focus” due to IE or what?
The dotted border a link gets when it is clicked on (focused) is actually not a “border” but an outline. Therefore, to remove the outline you would use outline: none;

quartzy
05-21-2009, 02:19 AM
Tried the outline none, but it did not work.

What I am working on is a tabbed panel, the outline keeps going blue, and does not look good. I have not got a clue really on the js but I will attach the script.
[ICODE]ul.tabs a:link.focus {outline: none;}[ICODE]

quartzy
05-21-2009, 02:22 AM
will try again with the js

VIPStephan
05-21-2009, 02:22 AM
Please post a link to your site. We aren’t psychic.

quartzy
05-21-2009, 02:24 AM
Obviously I have not uploaded it to my site until it is good. To what are you referring to, with we are not physic?

quartzy
05-21-2009, 02:28 AM
Here is a screen dump of the problem.

quartzy
05-21-2009, 02:33 AM
Fixed it.

[CODE]
ul.tabs a.active {
position: relative;
top: 1px;
outline:none;
}
[CODE]

VIPStephan
05-21-2009, 02:35 AM
Obviously I have not uploaded it to my site until it is good. To what are you referring to, with we are not physic?

What I mean is nobody can tell you what your problem is if you just say you have a problem with your link border and post a snippet of your CSS. This doesn’t tell us anything about how the actual markup (HTML) looks like and/or if other CSS rules are overriding styles in that snippet. And you know, it is important to know that since CSS is styling HTML and if the HTML is wrong then CSS can’t do anything to make it better. And we don’t even know if there are other CSS rules that may override these ones – because we aren’t psychic.

Additionally, JavaScript is also influencing and even dynamically changing the HTML so unless you show us your complete code or at best show us a live example nobody can tell you what is wrong because as I said: we aren’t psychic. We can’t read your mind.

If you want help (which is what we’re here for) then please help us by providing as much information as possible to make it most convenient for us that are trying to help you for free in their spare time to find the issue and fix it. I don’t wanna download any text files or whatever and put them together in my editor, and I don’t wanna guess what your problem could be, I wanna see a live example or at the very least your entire code.

quartzy
05-21-2009, 02:38 AM
Thanks for explaining, I did find you a little abrasive, we are all learners, I help people too on these forums, and there is a stage of learning where you also need help, so a polite manner is the best, I find. Thanks for your assistance, but as I posted I have now fixed it.

Bill Posters
05-21-2009, 12:11 PM
Re: outline:none;

Use with caution…

http://webaim.org/blog/plague-of-outline-0/
http://www.456bereastreet.com/archive/200905/dont_forget_keyboard_navigation/
http://www.456bereastreet.com/archive/200905/do_not_remove_the_outline_from_links_and_form_controls/

(Strongly) Consider using fallbacks to maintain usability…
e.g. http://www.cssplay.co.uk/menus/ndlrt.html

quartzy
05-21-2009, 01:36 PM
Here are my links, I would like to add a hover and put the focus on that, but the links are done in a confusing way.

[CODE]
ul.tabs a, ul.tabs a:link, ul.tabs a:visited {
background: #FFE500;
color: #666;
}
ul.tabs a.active, ul.tabs a:link.active, ul.tabs a:visited.active {
background: #FFF;
color:#666; font-weight: bold;
}
ul.tabs a.active {
position: relative;
top: 1px;
outline:none;
}
[CODE]

Could you suggest a way to add a hover to the links?

quartzy
05-21-2009, 01:58 PM
Tried adding a hover, but I guess the javascript does not allow it, anyhow I now have a focus on hover and click and that should be good enough for accessiblity I also have links when js is disabled.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum