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.
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.
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
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
Finally I usterstand what overflow is for.
§ #3 By Philip Suffren at 9:32pm on March 25 2007
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
§ #4 By Ben Rogerson at 9:32pm on March 25 2007
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
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
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