Outlinefix For Mozilla's text-indent: -9999px; Focus Rectangle Issue [Update]
When building search engine friendly but nice looking websites, webdesigners might sometimes replace a headline with a graphic logo. One trick has been to use hide the text in the headline and add the logo image as a background, thusly:
h1 a {
display: block;
text-indent: -9999px;
width: 100px;
height: 30px;
background: url(logo.gif);
}
This works fine in most browsers; it shows the text to search engines, and shows the logo to human visitors. Except when they click the link, in Firefox 3+, a 9999px wide focus rectangle is shown flying off towards the left side of the screen. I propose this fix:
.outlinefix :focus, .outlinefix:focus {
-moz-outline-style: none;
}
Like you’d use the long-standing auto-clearing-float clearfix, once you have the above CSS in your stylesheet, you can now simply add the outlinefix class to the links on which you want to remove the focus rectangle:
Topdesign Studios Incorporated
Update: As suggested by commenters, simply adding overflow: hidden; is a much simpler solution.
- Five Things We Hope Barack Obama Has Learned From Conan The Barbarian
- Outlinefix For Mozilla's text-indent: -9999px; Focus Rectangle Issue [Update]
- Type To Launch Is The New Commandline
- How To Fix The Broken Latch On Your Last-Gen Macbook Pro, Which Is Why Your Lid Won't Close
That’s quite handy, I’ve come across this bug a couple of times but never went to the extra effort to try and fix it. I’ll keep that little snippet in my default CSS starter-sheet. :) Thanks!
I would guess that Mozilla doesn’t actually consider it a bug, but rather a “correct” interpretation of the CSS. I guess the text-indent thing could be used for sinister SEO like purposes, and in such cases the 9999px rectangle could, in some circumstances help reveal the hidden stuff.
Though if that was really the case, it’s somewhat surprising they’ve left in CSS to disable the rectangle.
Very odd issue.
Is it just me or should these reply comments have a tiny bit of padding around them?
It’s not you. I’m scrambling these days. Please bear with me.
Tweaked the paddings and margins.
Sorry if this is wrong, but I’ve always found that “overflow:hidden” works. Wouldn’t it be easier to just add that into the style rather than adding an extra class to “fix” it.
Or does overflow hidden cause other problems?
Thanks and great site by the way.
I didn’t know about overflow:hidden;, interesting, I’ll try that.
However, I am pretty sure that IE will choke on that. It always has problems with overflow.
Thanks.
Hi Joen,
Thanks for a great blog!
I agree that the dotted borders don’t look nice from a aesthetic point of view, so I most certainly understand your triumph. On the other hand they serve a very important accessibility/usability purpose by allowing keyboard users to tab through the content while having a clear visual clue.
I use the overflow:hidden trick too, it’s never caused me any troubles… yet.
Joen -
Through the past many years I have enjoyed the artwork you have shared.
I really enjoy the interactive pieces and wish you would continue posting.
Never the less, I have been an interaction designer for 15 years and have been working on web applications for most of that period and have some experience with image replacement.
I believe that this problem has been researched and various techniques have been cataloged by Dave Shea of Mezzoblue. You can find his latest information on image replacement at http://www.mezzoblue.com/tests/revised-image-replacement/.
Crazy smart.
- Christopher
Thanks so much for your kind comments.
Good article you link there.
I’m not quite sure it fixes the problem in question, though, which is the outline that appears when you click a link — I’m referring to a 9999px wide dotted focus rectangle that flies off the left of the screen.
I’ve always used overflow: hidden; myself, no issues so far.