Why does my image have a black square around it but just with IE :-(

I have the following code block:

<li><a ><img 开发者_高级运维class='ico' src='../../Content/Icons/home.png' />Home</a><img class='sep' src='../../Content/Images/sep1.png' /></li>

It works as expected BUT around the 16x16 ico image there is a black border. I already have the CSS as follows:

li a {padding: 0px 5px 5px 5px; height: 18px; 
      display: inline-block;
      text-decoration: none; position: relative;bottom: 7px;
} 

I have no problem with Firefox and Chrome but just with IE.

Does anyone know how I can fix this. I would have thought it would have obeyed the text-decoration: none for the image.

---

You just need to remove the default img border:

img {
    border: 0
}

That should preferably go near the top of your CSS.