html/css - using sprite with <img> tag - how to remove the outline in Chrome?

Question

I'm redoing a site in which I'm using a CSS sprite. I'm also using the sprite with some tags, which I cannot remove.

So the tag gets a CSS-background-image and appropriate background position. Works fine. I had to remove the alt-attribute, because this kept showing on Firefox. Not nice, but ok.

My problem: In Chrome I end up having a faint outline around the image. I first thought these were border, but I think it's outline.

If I CSS outline: 3px solid blue the faint border, becomes 3px solid blue... but if I set outline: 0; nothing happens.

More code: HTML

<img class="ui-li-icon ui-li-thumb iconComments" />

CSS

.ui-icon, .iconComments, .iconMail, .ui-icon-searchfield:after {
    background:  #FFFFFF  /*{global-icon-color}*/;
    background:  transparent  /*{global-icon-disc}*/;
    background-image:  url(img/sprite.png)  /*{global-icon-set}*/;
    background-repeat: no-repeat;
    -moz-border-radius:  9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    } 
.iconComments {
background-position:    -36px 50%;
    }
.iconMail {
background-position:     2px 50%;
    }
.iconComments, .iconMail {
height: 20px; 
width: 20px;
    }

Any idea, where the outline/border is coming from and how to remove it?

Thanks

Answer 1

If you can absolutely position the image, you can use the sprite directly in the foreground using the CSS clip property.