Firefox 3 Phantom Red Dot Pixel solution
So there is this annoying little bug in Firefox 3 - basically, if you have an image link, you will get this extremely annoying red dot in the upper left corner of the image when you click on it. This is because you don’t have all the possible ‘a’ states defined, and Firefox 3 appears to be stricter about that than other browsers. Don’t feel bad - even Google didn’t do it right (see above - look at the blue arrow). Here’s the fix.
In your main CSS file, add this line:
a:focus, a:hover, a:active { outline:none }
That’s it! The red dot will go away. If only all web development annoyances were this easy!
6 comments so far.
Perfect, the problem is solved now…thanks!
Excellent! Thanks for the heads up!!
Hello,
First time visitor here. Found this site running a Google search for “dot above links in Firefox 3″ because it happens on more than just image links as far as I can tell.
On one of my sites it happens on certain links that are just text, and the color appears to coincide with the text-color of the link. In my case the text is #ffcc00 and so is the dot. The dot is also centered above the link, presumably due to the text-align attribute being centered.
My main reason for the post though, is to comment on your fix. It works just fine of course, but can be a drawback when considering people with disabilities as they often use TAB to navigate. Using this CSS-fix will cause them to not be able to tell which link is currently focused.
Just a heads up, and unfortunately I don’t know of any other workarounds at this time.
Regards.
Hey Mr.G,
Yeah, unfortunately you are correct. Such is the life of the web developer - it’s a big game of compromises.
I think I found a global solution. Create a CSS class like this:
a.ffx:focus, a.ffx:hover, a.ffx:active {
outline: none;
}
Then, every time you link an image, assign this class to the anchor around the image. When you link text, do not use this class.
This way you will get rid of the pixel above images and still have text links outlined when you tab around the page.
Cheers!
Marcus
Hey Marcus,
Thanks for the post! This seems like a good solution to the accessibility problem (although applying a class to every image link could potentially be a bit of a pain….)