Bad outline
While using the Phark method for background image replacement, you’ll notice that while the link is being clicked, an outline appears that stretches out of the screen towards the left. This makes it look as if something is broken when you click a link.
If this irritates you, don’t worry, there’s a very simple fix for this.
Just adding a simple outline: none to the anchor element of the tag to which phark is applied easily rectifies the outline by not displaying it.
This may come in handy to someone someday.
April 6th, 2006 at 8:18 pm
Ooh, nice tip!
April 11th, 2006 at 8:36 pm
Thanks.
April 16th, 2006 at 9:59 pm
I suggest you don’t use this method as it remove the ‘halo’ focus effect that browsers have purposely implemented for usability reasons. Using outline: none; removes this, so ruins the user-experience for keyboard users.
Instead, overflow:hidden; solves this implementation, and infact makes sense in cropping (instead of removing) the focus halo.
Nathan Smith mentions using a similar techinque to you, and I informed people in the comments to user the overflow method, which is actually mentioned in the orginal Phark method article.
April 16th, 2006 at 10:00 pm
Well, it has removed the links, so I here they are
http://sonspring.com/journal/removing-dotted-links
http://phark.typepad.com/phark/2003/08/accessible_imag.html
May 10th, 2006 at 12:18 am
*trovster*: Thanks for the advice.