Internet explorer displaying image links with colored border

Question

I have the following CSS code for links:

a {
    text-decoration: none;
    color: #248AC9;
}

a:hover {
    color: #8DCFF7;
}

The problem is that in Internet Explorer, images have a strange border with the same color as 'color'. How can I fix this, and draw images correctly. The HTML code is simple: <a href="calculator-operators.htm"><img src="img/link.png" /></a>

Screenshot: So, how can I fix this problem?

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

Klaus Byskov Pedersen · Accepted Answer · 2012-02-12T14:01:30.237

35

Just specify no border for the images:

a > img{
    border: 0;
}

edited Feb 12 '12 at 14:01

answered Feb 12 '12 at 13:48

Klaus Byskov Pedersen

117,245
29
183
222

This fixed the problem... thanks :) And I like this solution better, because it doesn't interfere with other (non-link) img styles. – Tibi Feb 12 '12 at 13:50
1

Note that you don't need to specify the unit type when using zero values. i.e. 0; will suffice. – devdigital Feb 12 '12 at 14:00
how, for something so common, is this Q&A not voted higher?! – Don Cheadle Oct 01 '15 at 22:02

score 6 · Answer 2 · answered Feb 12 '12 at 13:50

6

Use

img {
   border: 0;
}

I would consider using a reset stylesheet, or a normalising stylesheet to provide consistency in styling across all browsers. This fix is part of those stylesheets.

answered Feb 12 '12 at 13:50

devdigital

34,151
9
98
120

Carl0s1z · Answer 3 · 2013-11-16T10:27:38.750

3

Its an old post i see, but i thought, why not. There is an other solution by using border:none;:

a img {
   border:none; 
}

edited Nov 16 '13 at 10:27

answered Jun 14 '13 at 07:23

Carl0s1z

4,683
7
32
47

score 0 · Answer 4 · edited Feb 12 '12 at 13:50

0

just set the border from all image to 0 px

   img { border: 0px }

edited Feb 12 '12 at 13:50

Chuck Norris

15,207
15
92
123

answered Feb 12 '12 at 13:49

Melvin

3,421
2
37
41

score -2 · Answer 5 · answered Feb 12 '12 at 13:51

-2

Try

a { 
    text-decoration: none; 
    border:0;
    color: #248AC9; 
}

answered Feb 12 '12 at 13:51

ParPar

7,355
7
43
56

This doesn't work. And painting with white is not a solution... background is a very light gray, not white. – Tibi Feb 12 '12 at 13:53

Internet explorer displaying image links with colored border

5 Answers5