I am trying to make the ugly grey border that appears around anchor tags go away. The CSS property " outline:none; " works for Firefox, but how can I do it in IE. Preferably using CSS expressions or jquery. I'm not worried about accessibility BTW.
Based on your suggestions I found these to be the best solutions...
The jquery(for IE browsers):
$('a').focus(function(){
$(this).blur();
});
Another jquery option(for IE browsers only):
$('a').focus(function(){
$(this).attr("hideFocus", "hidefocus");
});
The CSS(For all other browsers that force an outline):
a{
outline: none;
}
Note: Some browsers such as Google Chrome don't force an outline on focus.
Source: Tips4all
Unfortunately I think hideFocus is your best answer as blur isn't always appropriate:
ReplyDelete<a href="..." hidefocus="hidefocus">...</a>
http://msdn.microsoft.com/en-us/library/ms533783(VS.85).aspx
It sounds like you're talking about the dotted border that appears when you tab through links. You have the correct solution for Firefox (outline: none in the CSS). The best solution I've used for IE is to add an onfocus listener that removes focus:
ReplyDelete<a href="" onfocus="this.hideFocus=true;">link</a>
Take a look at this site for an example of how you might do it globally: http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i
For IE, you can use Javascript like this:
ReplyDelete<a href="..." onfocus="this.blur();">Click Here</a>
Read more:
http://www.htmlgoodies.com/beyond/javascript/article.php/3471171
For Firefox and Safari, outline:none works.
Read more:
http://css-tricks.com/removing-the-dotted-outline/
Unless I'm missing which dotted border is being discussed, outline:none works in Internet Explorer 8 (at least, for me). Rather all of a sudden some hyperlinks were rendering with a dotted border (the only attribute I remember changing is display:inline on an h2 element that contained a link, afterwards the dotted border appeared). So I threw in a { outline:none; } in my global stylesheet and poof, no more border in IE8!
ReplyDeleteDoes this not work?
ReplyDeletea
{
border: 0;
}
a {outline:noneIE 8} css seems to work well on Firefox, Chrome and IE 8.
ReplyDelete