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!
21 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….)
Thanks alot, For the help.Now problem is fixed.
You’re welcome! Glad it worked
Thanks, this was driving me nuts.
I found that if you have your “/” in your image declaration incorrect, if you have it as “\” instead of “/” then it will not allow your picture to show. IE seems to not care about which way it is, but firefox seems to not display it correctly until you fix it.
greG
Greg….why would you want to do that?
The problem only seem to occur when an anchor is the outermost tag describing an element. For example, the following code do NOT produce the error. Heading
If the tag is nested inside the anchor, however, the red dot appears. Also, it’s worth mentioning that the default underscore of anchor elements is not rendered when the red dot is visible.
Heading
Forgot to mark my HTML properly. It was supposed to be Heading and Heading
I know that the -tag is deprecated and that is to be used instead, but it currently doesn’t do the same thing with HTML tags (display HTML as text, that is). Guess that’s another bug. A workaround would be to use < and >.
Your comment system does not support the deprecated <xmp>-tag (which is good, I guess), and thus my HTML lasts posts are not rendered the way they are supposed to be. Read them all and you’ll get the idea anyway.
Thank you for posting this! I’d been beating my head against all morning, and your fix made it all better.
[...] Fixing the Red Dot in Image Links in Firefox 3 | Frye / Wiles Blog (tags: css firefox) [...]
I’m not a programmer, and hence use Fireworks to create my websites. Is there a way to fix this problem in simple HTML and not in CSS.
I also use Dreamweaver, so maybe there’s something I can do in DW to fix it…
Any help is appreciated.
Thx
You’re out of luck. Learn CSS! The problem is that your browser will apply CSS styles regardless, which is where the red dot comes from. The only way to get rid of it is to override the CSS.
so can I copy and paste your CSS fix somewhere in the CSS file…I’m planning on learning CSS, just need to fix this issue for a client project I’m doing.
thx
it’s worth a try I suppose
Thanks Rob,
I has a similar problem when clicking on a text only link that activates javascript upon clicking. And funnily enough I had BLUE dots showing up. This fix worked perfectly.
Cheers,
Barry