Remove annoying rectangle in the latest Firefox build

The negative text indent image replacement technique (a.k.a. the Phark image replacement) is very popular and widely used in many modern (i.e. accessible) designs.

There’s, however, this annoying rectangle, which is in Firefox 1.5 now expanded all the way to the left (usually it’s 9999 pixels to the left). The rectangle is ugly, and while we’re waiting for Firefox developers to fix it (report Firefox bugs), here’s a quick and dirty solution:

var remove_rectangle = function() {
    var lnks = document.links;
    if (lnks) {
        for (var i = 0; i < lnks.length; i++) {
            lnks[i].onmousedown = function() {
                this.blur();
                return false;
            }
        }
    }
}
window.onload = function() {
    remove_rectangle();
    // the rest of your onload functions
}

Unfortunately, we can’t remove the rectangle completely, because focus() functionality is necessary for browsing with a keyboard.

Speaking of which, do you always define :focus and :active pseudo-classes or do you sometimes forget about them?

Marko Dugonjić is a designer specialized in user experience design, web typography and web standards. He runs a nanoscale user interface studio Creative Nights and organizes FFWD.PRO, a micro-conference and workshops for web professionals.

Interested in more content like this?