How do i remove active link border in IE & FF?

kaos_frack · December 11th, 2006, 04:43 AM

You all know that IE and FF draws a dotted line around a link when it is focused. When I create custom button using images and stuff, that border around the link makes my buttons look very ugly. Is it possible to remove it using CSS?
I tried:

Code:

a, a:hover, a:visited, a:active {
   border:none;
   outline:none;
}

but no use. Border is still displayed. I could however achieve it with JavaScript:

Code:

for(var i=0; i<document.links.length; i++) {
   document.links[i].onfocus = function() {this.blur();};
}

But this is very inefficient, relies on JavaScript and can be very slow if there are many links on a page. Did anybody have had this kind of problem? Is there a solution with CSS?

meow · December 11th, 2006, 06:56 AM

Please don't. Browser features should be left alone. This one is a navigation tool and an accessibility aid. I use IE most of the time, I'm used to the outline and I rely on it. Someone who navigates with the keyboard would be pretty much lost without it.

--
http://yupapa.com

kaos_frack · December 11th, 2006, 10:57 AM

Well, yes. it's a navigation tool. Different browsers use different methods. But for my project I'm using a method that is the same for IE, FF, Opera, Mozilla and Netscape. So, if also the border is displayed it looks ugly. Besides, I'm not asking should I remove that border, but how I can do that.

frguru · February 18th, 2007, 10:49 AM

Hi, in html tag its <img style="border: none;" etc>

js_newbie · March 7th, 2007, 11:34 AM

Hi Meow,

I have visited your website! Could you tell me how to make up your table in the side frame? And how to make the dotted outline in the side frame ? Many thanks!

Best regards

Newbie

meow · March 7th, 2007, 12:21 PM

Hi! :)
yupapa.com? I'm afraid it's not mine. I'm just the cat around there.

I don't see the dotted outline you refer to though. Where do you mean?

--
http://yupapa.com