Removing blue outline/border from image anchor IE

Question

To start off, I don't even know what this is. I tried text-decoration: none, border: none, outline: 0, and nothing seems to work? My CSS file is working all right, so it's not that?

Here's a picture: http://i38.tinypic.com/rbgv3k.jpg

<div id="links">
  <span id="user"><a id="link" href="register.php"><img src="images/user.png"/></a></span>
  <span id="follow"><a id="link" href="https://twitter.com/itsybitsycom"><img src="images/follow.png"/></a></span>
  <span id="about"><a id="link" href="about.html"><img src="images/about.png"/></a></span>
  <span id="stats"><a id="link" href="profile.php"><img src="images/stats.png"/></a></span>
</div>

CSS

#link {
  text-decoration:none;
  border:0;
  outline:none;
}

Can we have a chance of having a look at your HTML? BTW try adding `img{border:0}` to your CSS — Ejaz, Apr 23 '13 at 20:00
Possible duplicate of [How switch off image border in IE](http://stackoverflow.com/questions/2958688/how-switch-off-image-border-in-ie) — Amos M. Carpenter, Feb 19 '16 at 02:49

score 32 · Accepted Answer · edited Jun 25 '17 at 06:11

32

try adding following to your CSS

img{ border:0 }

edited Jun 25 '17 at 06:11

ItamarG3

4,092
6
31
44

answered Apr 23 '13 at 20:05

Ejaz

8,719
3
34
49

score 15 · Answer 2 · answered Apr 23 '13 at 20:05

15

IE adds a border around images if they’re the child of an anchor. You can remove this by setting the border to none:

a img {
      border: none;
}

answered Apr 23 '13 at 20:05

David Storey

29,166
6
50
60

score 7 · Answer 3 · answered Sep 12 '14 at 09:04

7

a{
    outline: none !important;
 }

Worked for me.

answered Sep 12 '14 at 09:04

Richard Guy

470
4
12

This is the better answer in my opinion, as it will work with all anchor tags (not just images with anchors around them). – Jabari Jul 09 '15 at 04:04
1

No. Some people don't want the blanket approach to everything. Some pages have both links and image links. How do you control this on the image links alone? – Fandango68 Nov 08 '16 at 01:16
This didn't work for me in IE 11, had to go with border: 0 on the img – hobwell Nov 19 '18 at 14:12

score 3 · Answer 4 · answered Apr 23 '13 at 20:05

3

You need to add the CSS to the image, not to the link. Instead of #link, you need to use #link img as the selector.

Then border:none; should work for you.

#link img {
    border: none;
}

answered Apr 23 '13 at 20:05

Spudley

166,037
39
233
307

score 3 · Answer 5 · answered Aug 22 '13 at 06:36

3

#link img a
 {
 border:0;
 outline:none;
 }

answered Aug 22 '13 at 06:36

score 1 · Answer 6 · answered Apr 23 '13 at 20:01

1

You should be able to do it with this CSS:

border-style: none;

answered Apr 23 '13 at 20:01

tymeJV

103,943
14
161
157

No, that only works on the tag, not the tag. The tag is what's placing the "blue border" out there. CSS on the "a" is the only way I know how to avoid it – Fandango68 Nov 08 '16 at 01:26

Removing blue outline/border from image anchor IE

6 Answers6

Linked

Related