The unity*dc B2B marketing blog: Web standards

How to fix the Firefox outlining problem with menu bars that use Phark image replacement

Thu, 29th May 2008

Many of us use Phark image replacement to implement menus for web-standards sites. In HTML, the menu is simply an unordered list. The Phark technique (adding a background image and indenting the text very far to the left) is used to replace each menu item with an image.

However, in some Firefox browsers, when the user clicks on a menu item, a dotted outline appears which runs right off to the left. This is unslightly and can be confusing for visitors. To avoid this, simply use the following fix:

a { outline: none; }
:focus { -moz-outline-style: none; }