Blue border around image maps in Internet Explorer 9

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; }

possible duplicate of [how to remove blue border around links in IE9?](http://stackoverflow.com/questions/10284954/how-to-remove-blue-border-around-links-in-ie9) — Darth Plagueis, Jun 23 '14 at 12:38

score 7 · Answer 1 · answered Apr 17 '12 at 15:05

7

Why not just

a,img { border: none; }

answered Apr 17 '12 at 15:05

Andrew Briggs

1,329
12
26

Gosh, I forgot about adding there "a". However, it still doesn't work. – Irminsul Apr 17 '12 at 15:25

score 2 · Answer 2 · answered Dec 30 '13 at 16:13

2

this worked for me

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

answered Dec 30 '13 at 16:13

Raymond

21
1

score 1 · Answer 3 · answered Apr 17 '12 at 15:00

1

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

answered Apr 17 '12 at 15:00

Edu Ruiz

1,878
1
17
27

Hmm, I've tried `` - but unfortunately, it didn't work. – Irminsul Apr 17 '12 at 15:06

score 0 · Answer 4 · answered Apr 17 '12 at 15:11

0

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;}

answered Apr 17 '12 at 15:11

HMartch

728
3
12

score 0 · Answer 5 · edited Aug 21 '13 at 18:37

0

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.

edited Aug 21 '13 at 18:37

Brant Olsen

5,628
5
36
53

answered Aug 13 '13 at 07:57

Dan

1

Blue border around image maps in Internet Explorer 9

5 Answers5

Linked