Trimming Long Outlines in Firefox

Nathan Smith had a post awhile back about those stray outlines in Firefox 1.5 due to using a negative value for text-indent used in image replacement. I initially passed on the article as I like users to still receive the default feedback.

Then, in trying to resolve the problem on my own site, I tried using overflow:hidden on the replaced link and suddenly the outline fit into place. In referring back to the article to see if I missed something, it appears that Trovster mentions this in the comments. I just wanted to highlight this fact as I seemed to have missed it.

Maratz documents this issue well on his site (who's article I also seemed to have missed at the time).

Published May 05, 2006 · Updated September 14, 2006

Categorized as HTML and CSS

Short URL: https://snook.ca/s/590

Conversation

15 Comments · RSS feed

Nathan Smith said on May 05, 2006

Hey, thanks for the link. I realize that this could possibly create some accessibility concerns, by basically changing Firefox into Opera (zing!). For my own sites, I don't worry about it, and just use the old hiding the inner span method, but placing a title attribute on the link itself, to give something for screen-reader software to speak aloud. Extra markup, but works consistently. To each his own, as long as it's accessible, eh? :)

trovster said on May 05, 2006

I just noticed this in my RSS feed, and was going to rant on again about using overflow: hidden; but then got a nice suprise and recognition of suggesting it! Thanks Jonathan.

Nathan: Gilder/Levin techinque which places the image over the text is the solution I used to use (works with CSSon/Imagesoff!!) but not with transparent images and required extra markup, so I've now completely switched to Phark (text-indent).

said on May 05, 2006

That stray outline bug (and stray hyperlink underline) happened in Firefox 1.0.7, and I've been using overflow : hidden to get around that bug since then. I didn't realise it still existed on 1.5

Johan said on May 05, 2006

Stu Nicholls over at CSSPLAY fixed this for Moz FF (not sure it is the same thing however)

http://cssplay.co.uk/menu/naf_ir.html

Sean Sperte said on May 05, 2006

I was under the impression overflow:hidden was necessary to keep from horizontal scrollbars from appearing anyway.

Johan said on May 05, 2006

> I was under the impression overflow:hidden was necessary to keep from horizontal scrollbars from appearing anyway.

overflow:hidden can be used for clearing floats even

http://www.quirksmode.org/css/clearing.html

Eric Shepherd said on May 05, 2006

Funny, I never noticed this until FF1.5, so I'm recursively going through sites adding overflow:hidden. But I'm leaning more and more toward the Gilder/Levin method lately. It's a little extra code, but I can almost write it in my sleep now...

Mike said on May 05, 2006

Just to let you know, the outline for the logo/home link is still visible for me in FF 1.0.7 on winxp.
All the others are gone though, and the pages now look alot cleaner.

Nice job on the redesign too, from a fellow Canadian!

Jonathan Snook said on May 05, 2006

Mike: thanks for pointing out the issue on the logo/home link. I missed that one. :)

Bramus! said on May 07, 2006

a { outline: none; }

does it for me... or are there any cons for not using this?

Jonathan Snook said on May 07, 2006

The con is similar to removing the underline from links. You remove a familiar behaviour... in this case, removing outlines will hide the ability to tab through links on a page (IIRC).

Assaf said on June 10, 2006

Thank you! I've been looking for this link lately and really had no idea with what keywords to search it.

Layka said on February 19, 2009

Marinessa said on February 19, 2009

lora said on February 20, 2009

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Snook.ca

LIFE & TIMES of a WEB DEVELOPER

Trimming Long Outlines in Firefox

Conversation