Blue border around image maps in Internet Explorer

Question

I've got the following problem - I'm using image maps on the site. In Internet Explorer 9 (IE8 is fine), when I click on link (area tag), there appears a blue border around it. How to get rid of it? I've tried:

map, map area {
border:none !important;
}
img, a img, a:link img, a:visited img {
border:none !important;
}

But it didn't help. Did anyone have this problem? Please look at the site - http://www.naturalnie.test.dih.pl/. Image map is under logo, where links say: "Home, Kosmetyki, Lekarstwa, Żywność i suplementy, O Naturalnie.net".

EDIT:

I found the solution. Following code works:

a, img {outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

Answer 1

This solution will cause conflicts with images that double as both links and content that also have borders. However, if your image links have no existing borders, it should work to rid you of the outline in IE with compromising anything else:

a img {border: none; }

Just add it to your master css styles sheet...it fixed my problem perfectly.

Answer 2

I'm not really sure, but try to set in html the <img border="0" />

Answer 3

Since you say the border appears after clicking on the link, that sounds to me like a "focus" bordering.

Try a:focus {border:0 none;}

Answer 4

this worked for me

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

Answer 5

Why not just

a,img { border: none; }