Rob
Posted by Rob
Posted on 06-27-2008 under CSS/HTML Markup, Development

even Google has problems sometimes

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!

Socialize

21 comments so far.

Jones

Perfect, the problem is solved now…thanks!

Posted On Jul 08 2008, at 15:47
morphlex

Excellent! Thanks for the heads up!!

Posted On Sep 04 2008, at 12:19
Mr.G

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.

Posted On Sep 10 2008, at 00:21
Rob
Rob

Hey Mr.G,

Yeah, unfortunately you are correct. Such is the life of the web developer - it’s a big game of compromises.

Posted On Sep 10 2008, at 09:27
Marcus

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

Posted On Sep 17 2008, at 11:15
Rob
Rob

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….)

Posted On Sep 17 2008, at 11:18
Jobin Kurian

Thanks alot, For the help.Now problem is fixed.

Posted On Feb 15 2009, at 21:04
Rob
Rob

You’re welcome! Glad it worked

Posted On Feb 16 2009, at 09:00
Boodu

Thanks, this was driving me nuts.

Posted On Feb 27 2009, at 23:17

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

Posted On Feb 28 2009, at 01:13
Rob
Rob

Greg….why would you want to do that?

Posted On Feb 28 2009, at 08:40
Per Henrik Kristiansen

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

Posted On Mar 08 2009, at 15:19
Per Henrik Kristiansen

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 >.

Posted On Mar 08 2009, at 15:33
Per Henrik Kristiansen

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.

Posted On Mar 08 2009, at 15:36

Thank you for posting this! I’d been beating my head against all morning, and your fix made it all better.

Posted On Mar 18 2009, at 08:10

[...] Fixing the Red Dot in Image Links in Firefox 3 | Frye / Wiles Blog (tags: css firefox) [...]

Posted On Apr 30 2009, at 16:31
Amey

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

Posted On May 20 2009, at 10:11
Rob
Rob

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.

Posted On May 20 2009, at 10:27
Amey

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

Posted On May 21 2009, at 22:48
Rob
Rob

it’s worth a try I suppose

Posted On May 22 2009, at 06:21

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

Posted On Jun 18 2009, at 06:50


Post your comments

Fill up the fields below. Email is required but won't be revealed to anyone. Some (simple) html is allowed. If you want to cite another comment use the "Quote" link located beside each author. Finally be nice or at least keep it polite. Thanks for posting.