• Home
• About
• Web Services
• Web Packages
• Portfolio
• Contact
• Support
• New Articles

Wednesday, September 8th, 2010

Removing the dotted line from around clickable areas

Feb 22, 2008 : There are several ways to go about it and some are better than others at achieving a perfect solution. If you dislike seeing this quirk, then read on..

No1. Solution;
open your style sheet and add a universal CSS rule for all links, like so.

a{outline: none;}

The problem with this method is that it removes the dotted line completely effecting the accessibility of the web page, rather than just fixing the bug.

No2. Solution;
This is used to fix the problem in Firefox browsers. Add the following into your main(global style sheet)

a:focus{-moz-outline-style:none;}

No3. Solution;
If you happen to use image replacement that are links, then this solution is for you. Add the following CSS to your image replacement style rule will stop the dotted line extending off the page when you "focus" on that link.

{overflow:hidden;}

Last updated: 12.02 PM on Jun 30, 2008

Back to the news articles | Back to top [b]