Comments on: Outline property for image-replaced links

By: pablo dias

pablo dias — Tue, 24 Jan 2006 16:42:53 +0000

great article!
i was looking for a way to do that, exactly like you shown right here. but i just got one problem doing that.
well. i’m changing my website to a tableless code looking for a better accessibility too.
as you can see on my website (http://konb.org) the “hit area” for my links are on the word only. and if using a “display: block” there, the hit area is available on the entire width of menu (not just over the words)

does anyone have an idea?

i’m sorry if you cant understand my english
thank you anyway

By: marko

marko — Sun, 22 Jan 2006 08:08:47 +0000

Pogdesing, the display: none; technique acctually prevents screen readers to access text.

By: pogdesign

pogdesign — Sun, 22 Jan 2006 01:14:07 +0000

Why even use this technique? I have always prefered to use “display” .

eg:

text

h1.logo {background….}
h1.logo span {display: none;}

Yes is adds another line in the css, but then the text is not visable at all in a css enabled browser but is there for screen readers. Its also less code overall, because you dont have to include any uncessary javascript.

By: Nathan Smith

Nathan Smith — Sat, 21 Jan 2006 04:01:30 +0000

You make a good point, that we don’t want to alienate people that are using the keyboard for navigation. If we hide that outline, alternative means of showing active links should be provided. For now, I’m just leaving the outline on my sites. I just thought people might want to be aware of the ability to hide it, if absolutely necessary.

By: Stu Nicholls

Stu Nicholls — Fri, 20 Jan 2006 21:21:09 +0000

I see no problem in removing the active and focus default borders so long as they are re-styled in a way that is obvious to the user. After all we remove the default underscore on links without a second thought.
I have several demos on my site that show how to remove the dotted borders in FF and IE, which also allow the introduction of non rectangular, non-overlapping links.

By: Justin Perkins

Justin Perkins — Fri, 20 Jan 2006 15:51:02 +0000

I didn’t read your last article, but it’s nice to know there is an easy way to remove that outline. While in most cases, I think it’s perfectly appropriate to have a dotted outline around the clicked link; there has been times when I wished I could get rid of it.

As for the actual implmentation, placing the outline:none on the :hover pseudo class sounds silly. It’s not the hover that causes the outline, it’s the click. What a weird implementation, sounds like a bug to me.

For the record, I did play around with this just to verify it is indeed :hover that needs the value and not the :active pseudo class…I’ve always got to try it myself ;)

By: Jon Aldinger

Jon Aldinger — Fri, 20 Jan 2006 14:14:47 +0000

As I commented on Nathan’s article, take care to hide the overflow:hidden rule from IE5/Mac as it will hide the entire element. For example, your entire masthead above the navigation is mysteriously missing in IE5/Mac.

By: Craig

Craig — Fri, 20 Jan 2006 14:06:23 +0000

Why don’t we just ask Mozilla to fix it since it’s the only browser that is rendering it wrong?

By: trovster

trovster — Fri, 20 Jan 2006 13:55:43 +0000

I don’t recommend the outline: none; technique. Simply adding overflow: hidden; solves this spilling over of the focus halo. As I mentioned in Nathan Smith’s article.

For me this makes perfect sense for a solution. overflow: hidden; stops this happening, and is easy to understand and apply to other methods.

I haven’t seen the halo appear on :hover, only on :focus, or “onmousedown”. So adding outline: none; to that seems pointless.

Removing this halo effect breaks usability, especially with keyboard navigation, as tabbing to links doesn’t show the halo of which is currently active.

Sidenote: Why do you quote your background images? It’s optional, and breaks support for IEmac. Although it’s a deprecated browser, those extra bytes aren’t needed.