Be Good Not Bad by Brian Warren

25 March 2007

Removing Dotted Lines with Image Replacement

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.


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.