Quick Tip: Get rid of link borders in IE

A click button in IE. The way IE highlights “focus”-ed links can really wreck your design.

Please, don’t take this post as typical, angry developer IE-bashing. I don’t hate IE for the sake of it, I hate it because it’s horrible*.

*Does not apply to the new Javascript engine of IE9 which is lightening fast!!!

The screenshot for this article was taken using IE9 (although the same stuff happens in 7 and on Google’s (yes, I said Google) search page. To try it out for yourself, do a search, then click the More button to expand the list and click it again to collapse it. The screenshot is the result.

Normally minor quirks like this in IE are hardly even noticed (probably because people are too busy pulling there hair out with margin, float, and absolute positioning bugs which make their site look like something by Picasso reincarnated as a dog.

Some of you might be familiar with focus on HTML form elements. When you click a text input and the cursor shows up in it, that text input gains “focus”. Focus is not unique to form elements, however. Any HTML element can be “focus”-ed by clicking on it. The problem in IE (versus other browsers) is that when a link is focused, an ugly dotted border shows up on it.

You’d think you’d be able to fix this with CSS, but the border that shows up when a link is focused is a property of the browser, not a rendering of the styles by the browser – hence, CSS fixing is a no go.

if($.browser.msie) {
 $('a').live('click',function() { $(this).blur(); });
}