CODEWITHSUNDEEP
htmlcssimagecss-spritesoutline
frequent
frequent

Reputation: 28513

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

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

Upvotes: 0

Views: 2680

Answers (3)

Don
Don

Reputation: 21

The issue is likely due to the fact that you do not have a src attribute within your image tag.

Upvotes: 2

kojiro
kojiro

Reputation: 77137

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

Upvotes: 0

theDazzler
theDazzler

Reputation: 1059

Usually this is caused by the border attribute. I know you said you think it's outline, but did you try this in your img class...

.imgClass
{ 
border-style: none; 
text-decoration: none; 
}

or this

.imgClass
{
border:0;
}

Upvotes: 0

Related Questions