This tutorial looks at fixing the issue with the dotted area around links in Firefox.
If you do a search on google for 'dotted links firefox', almost all of the pages will have a title such as 'Remove dotted links from Firefox', 'Destroy annoying dotted links on Firefox' or 'How the hell do I get rid of dotted border around links in Firefox!!!'.
The sad thing is that these dotted links, although giving some designers a headache are actually there for a good reason and... shouldn't be removed!
The good reason for having these dots here is so that others who have issues with mobility e.g. they can't use a mouse, need to be able to see which element on a page has focus so that they can press their enter button at the appropriate time.
Like everything else in the world, the internet should be for everyone to share, so we should be doing our best as developer designer to ensure that our websites are accessible. (More visitors the better right?)
After this tutorial I will be placing a couple of links about acessibility that will hopefully give you some further background into accessability issues and the internet.
Before I go in to the issue, just some background. Many people run in to this problem when trying to use the combination of the text-indent css rule along with a background image, popularised by Mike Rundle in this post. Which in itself is a good practice, it is helpful for screen readers (read the post for more info).
Ok, on to the problem. Have a look at the code below and you will see an <a> tag that with a link inside that has the text indented so it no longer appears on the screen.
<a href='#' style='text-indent:-10000px;display:block;width:40px;height:40px;background:red;'>
Here it is below. If you are using Firefox and you click on the red box you will notice the dotted line stretches accross the page.
Now look at the example below and notice how the dotted line raps nicely around the red box.
This is fixed simply by using the css rule overflow:hidden. Once this simple rule is in place the dotted indicator wraps nicely around the <a> tag. Considering coders much better than ourselves spend their time build browsers like Firefox with the best intentions in mind (that include industry best standards and practices); take time to consider why things may not appear correctly in your browser before wanting to chop them out.
<a href='#' style='text-indent:-10000px;display:block;width:40px;height:40px;background:red;overflow:hidden;'>
Here are some links that you may find helpful.
- A great post about removing the dotted line, but adding your own styles here
- A List Apart article about user with accessibility issue read it here
- W3 Consortium's international policies for accessibility laws
- W3 Consortium's Web Web Accessibility Initative (WAI) home page