Firefox is growing to be the majority in web browsing, but it still has it's quirks. When you design a new web site you HAVE to test it in different browsers. Most people have noticed that Firefox will put a dotted border around links that have been clicked on, here is a simple bit of coding to stop that annoyance.
a:active, a:focus {
outline: 0
}
Add to: | del.cio.us | digg
9 comments:
Thank you.
This never mattered to me before, but I've got an incredibly complex layout on a new site with just about everything absolutely positioned. When you clicked a link the stinking border caused a 2 pixel scroll on a few elements.
Thank you so much. Saved me hours of frustration. My sidebar Archive's icons when toggled showed border around in Fire Fox too. I incorporated your code in the html template and it worked!
#sidebartop a:active, a:focus {
outline: 0
}
Doesnt work for form elements, like button image replacement
Thanks a lot...Great Trick...
@Jord,
To get it to work with form elements, you just need to stick the style inline.
ie. add the following to your input tag:
style="outline: none;"
Thanks - it was spoiling my tabs so that the tab no longer looked like a part of the document beneath it.
You are great! Many thanks
Not working for me.
I got a link inside a divtag, and im working with the link id for the CSS styles like this:
#aname
#aname:hover
When its hover, background replaces. But im still having that issue with the dotted border, although i have also created these CSS styles too:
#aname:active(border styel:none;0)
#afocus:active(border styel:none;0)
omg! thank you for this! i was going crazy trying to get rid of it!!!
Post a Comment