Image replacement is a fantastic and extremely versatile tool to have in your belt as an aspiring CSS Ninja. I’ve sung its praises before, so I don’t need to do that again. However, there has been one naggly thing about how Firefox treats image replacements that are also links. When you focus on that link, the dotted lines extend waaaaaay off to the left of the screen.
Alas!
I tinkered, poked and prodded. After a bit of that, I found a way to fix the problem! Adding overflow:hidden; to the image replacement style does the trick.
As I was putting together this post, I saw that Last Child had an article discussing this very issue and a way to take care of it. The drawback of their solution is that it removes all dotted lines entirely, rather than just fixing the bug.
I hadn’t seen a good way of fixing it before this little discovery, so I hope that helps my fellow CSS ninjas out there.
All articles on this site are licenced under the Creative Commons Attribution Non-Commercial Share-Alike license. All design, code, etc are All Rights Reserved.
Icons by iconbuffet and FAMFAMFAM. Thanks!
Be Good Not Bad is all about really good web design, based on the utmost respect for web standards, accessibility and respect for the user. Based in Denver, Colorado, Be Good Not Bad is run by Brian Warren, freelance designer, blogger, homebrewer and coffee nut.
Hey Mooty, thanks for your comment. As you see commenter #4 mentioned the same solution.
The problem I have with that solution is that while it does keep the outline from extending all the way off the left of the screen, it hides the outline completely, which isn’t very good for accessibility.
I’d much prefer to have the outline where it belongs rather than suppress it entirely.
§ By Brian Warren at 10:43am on April 21 2008