{"id":151,"date":"2005-12-03T11:30:02","date_gmt":"2005-12-03T09:30:02","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/12\/03\/remove-annoying-rectangle-in-the-latest-firefox-build\/"},"modified":"2006-04-06T18:35:11","modified_gmt":"2006-04-06T16:35:11","slug":"remove-annoying-rectangle-in-the-latest-firefox-build","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/12\/03\/remove-annoying-rectangle-in-the-latest-firefox-build\/","title":{"rendered":"Remove annoying rectangle in the latest Firefox build"},"content":{"rendered":"<p>The negative text indent image replacement technique (a.k.a. the <a href=\"http:\/\/phark.typepad.com\/phark\/2003\/08\/accessible_imag.html\">Phark image replacement<\/a>) is very popular and widely used in many modern (i.e. accessible) designs.<\/p>\n<p>There\u2019s, however, this annoying rectangle, which is in <a href=\"http:\/\/www.mozilla.com\/firefox\/\">Firefox 1.5<\/a> now expanded all the way to the left (usually it\u2019s 9999 pixels to the left). The rectangle is ugly, and while we\u2019re waiting for Firefox developers to fix it (<a href=\"https:\/\/bugzilla.mozilla.org\/\">report Firefox bugs<\/a>), here\u2019s a quick and dirty solution:<\/p>\n<pre>var remove_rectangle = function() {\r\n    var lnks = document.links;\r\n    if (lnks) {\r\n        for (var i = 0; i &#60; lnks.length; i++) {\r\n            lnks[i].onmousedown = function() {\r\n                this.blur();\r\n                return false;\r\n            }\r\n        }\r\n    }\r\n}\r\nwindow.onload = function() {\r\n    remove_rectangle();\r\n    \/\/ the rest of your onload functions\r\n}<\/pre>\n<p>Unfortunately, we can\u2019t remove the rectangle completely, because <code>focus()<\/code> functionality is necessary for <a href=\"http:\/\/www.w3.org\/WAI\/References\/Browsing\">browsing with a keyboard<\/a>.<\/p>\n<p>Speaking of which, do you always define <code>:focus<\/code> and <code>:active<\/code> pseudo-classes or do you sometimes forget about them?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Temporary solution for annoying rectangle in Firefox 1.5<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/151"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=151"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/151\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=151"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}