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

Removing Dotted Lines with Image Replacement

by Brian Warren on 25 March, 20077 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. I had done a write-up about this awhile ago, but the method I detailed gets rid of the dotted border completely, which is sorta bad for accessibility.

    http://sonspring.com/journal/removing-dotted-links

    § #1 By Nathan Smith at 9:32pm on March 25 2007

  2. Great, thanks! This solves another “naggly” for some of my IR implementations.

    Using the large negative left margin technique, the link is active all the way to the left edge too. For those that are placed away from the left edge, this is funky. Adding overflow: hidden; to that h1 tag keeps the links active area from extending to the left edge.

    This does not work putting overflow: hidden; on the – h1 a – tag, the way I’m coding it, it needs to be on the h1, where I have the margin, padding.

    I’m hoping putting overflow: hidden; on h1 does not effect the SEO, like (I believe I had read) Google will ignore – display: none;

    § #2 By echo at 9:32pm on March 25 2007

  3. Finally I usterstand what overflow is for.

    § #3 By Philip Suffren at 9:32pm on March 25 2007

  4. I’ve noticed the same problem, the overflow:hidden does fix it, but you can also ‘hide’ it by giving the active state a outline:none.

    But I recommend the first, overflow:hidden as the best way to fix the bug smile

    § #4 By Ben Rogerson at 9:32pm on March 25 2007

  5. Wouldn’t it be better to just use a different implementation of IR? This is one that I use often:

    background: url([IMAGE_URL]) no-repeat;

    height: 0;

    overflow: hidden;

    padding-top: [IMAGE_HEIGHT];

    width: [IMAGE_WIDTH];

    Instead of pushing text to the left, just push it below the element borders and hide any overflows. This still keeps the dotties, but only around the element itself. Good for usability, and none of the “left”-overs. Needs a conditional statement fix for IE5.5, though.

    § #5 By Brownspank at 9:32pm on March 25 2007

  6. The link in my name explains an easier way to do this. Try putting

    outline:none; on the a tag.

    gone

    § #6 By mooty at 8:13pm on April 20 2008

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

    § #7 By Brian Warren at 11:43am on April 21 2008

Name
Email (required but private)
Location
URL
Comment
Remember my personal information
Notify me of follow-up comments?

Recent Work

Crea

Expression Engine Development

Crea.be

Crea
Method Arts

CSS/XHTML & Expression Engine

MethodArts.com

Method Arts

Snook Approved!

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.