CODEWITHSUNDEEP
htmlcssinternet-explorer
user541597
user541597

Reputation: 4345

putting an img tag inside of an a href tag causes a border around image in IE

I have some HTML where I have img tags inside of an href tag to use as a button. Everything works fine except that when I open it in IE, I get a border around the img tag.

Here's some code:

<a href="javascript:changecolor(1)" title="Click Again to Change Color" style="cursor:pointer; text-decoration:none"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(2)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(3)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(4)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(7)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px;" /></a>
<a href="javascript:changecolor(6)" title="Click Again to Change Color" style="cursor:pointer"><img src="button.png" width="25" height="25" style="margin-top:600px; text-decoration:none" /></a>

How can I get rid of the blue border, which only appears in IE?

Upvotes: 35

Views: 40000

Answers (3)

GSoft Consulting
GSoft Consulting

Reputation: 718

Regarding the minor issue with Internet Explorer and the grayed box around the anchor tag - this is outline. To hide the outline box you can use following CSS:

a img{outline:none;}

Upvotes: 5

Amareswar
Amareswar

Reputation: 2064

Add border="0" attribute to the img tag

Upvotes: 12

Dan
Dan

Reputation: 10351

Simple fix, in your stylesheet create a style similar to this:

a img{
border:0;
}

In your case, you could update your style to include some of the inline styles you have in your HTML. For example, your stylesheet would be updated to:

a{
cursor:pointer;
text-decoration:none
}

a img{
margin-top:600px;
}

Upvotes: 48

Related Questions