WP-Mix

Internet Explorer has a nasty habit of displaying honking blue borders on linked images. This post shows a quick way to disable them using a slice of jQuery.

Disable linked-image borders in IE

To remove linked image borders in Internet Explorer, add the following jQuery snippet:

$('a:has(img)').css('color', 'transparent');

This basically says, “for any link that includes an anchor, change the color property to transparent. I think this works on IE because the border color is determined by the default color of the link element. I suppose you could change the border-color to zero or make it transparent as well, but the last I tried this was the only thing that worked. An alternate way of writing this with jQuery would look like this:

$('a').has('img').css({ 'color':'transparent' });

Disable linked-image borders in all browsers

Here is a more complete jQuery snippet that should remove borders from linked images in ALL browsers:

$('a:has(img)').css({ 'border':'none', 'color':'transparent', 'background-color':'transparent', 'padding':'0' });

Whereas the IE-only technique works by setting the color property to transparent, this technique works by setting all border-related properties: border, color, background-color, and padding. Just knocks ’em all out.

Disable non-linked image borders

Conversely, you could use jQuery to match images that are not included within a link:

if (!$('img').parent('a').length) $('img').css({ 'color':'transparent' })

This is just an example to contrast with the previous technique. Basically jQuery makes it easy to target elements that cannot be matched using CSS.