Be Good Not Bad : Web Design :: Brian Warren : Denver, Colorado

Removing Dotted Lines with Image Replacement

by Brian Warren on 25 March, 20071 Comments

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.

Comments

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

Recent Work

Housing Works
http://housingworks.org
Housing Works

Flickr

slideshowrss

Creative Commons

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!

Cloud Hosting - Formerly Mosso

Snook Approved!