I consider myself a Firefox power user. I have a really tweaked Firefox installation with custom “userChrome.css” files and lots of modifications in the configuration(about:config). All that with a couple of add ons make my browsing better and increase my productivity even more! Still I never stop looking for ways of improving the default Firefox installation. Recently I was having a chat with Ben and he said he didn’t like the dotted blocks when he was browsing my photos. Having that said I had to find a solution. I ended up with a couple of solutions actually!

The easy way was to made the change on the client side. Since he was the one having the problem I thought giving him a generic solution. Since he didn’t like that on my site, he probably didn’t like that on other sites as well. My solution was to load “about:config” on Firefox, look for a string named “browser.display.focus_ring_width” and change its value to ’0′. That really worked like a charm. No more annoying dotted lines around links.

But what about users who don’t want to change that? Well another solution was to make the changes straight from my site. I could use some CSS to avoid that. It is quite easy on mozilla based browsers since you can just use the “-moz-outline-style” property set to “none”. The drawbacks were that this CSS bit does not validate and other browsers don’t know what to do with it! In fact to get the same effect in Internet Explorer you have to set “hideFocus=true” on all anchor links on the “onfocus” property! This is time consuming and I don’t think somebody would do that; unless you use some sweet Javascript to do it for you! You can iterate throughout the anchor links using the “getElementsByTagName()” method and then using the “setAttribute()” method change all the anchor links automatically. You can find a solution like that on this site. Happy browsing!