html/css - using sprite with 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

You do realize that the `src` and `alt` attributes on an image are *required*? — animuson, Nov 02 '11 at 00:23
the images are just tiny logos in front of menu items. I found this other post on Stack Overflow, which I'm trying to follow along http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag — frequent, Nov 02 '11 at 00:28
@frequent: You should definitely be using a span for those images. I think you're confused what that answer is saying about "semantic meaning". An icon in front of a menu item has no semantic meaning, it's *decorative*. An image in the context of a paragraph has semantic meaning. — animuson, Nov 02 '11 at 00:31
@frequent by the way, if you can absolutely position the image, you can use the sprite directly in the foreground using the CSS `clip` property. — kojiro, Nov 02 '11 at 00:32
@Kojiro: Thx. That looks like the way to go for me. Make it an answer, so I can check? — frequent, Nov 02 '11 at 00:42

score 2 · Answer 1 · answered Apr 29 '12 at 17:52

2

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

answered Apr 29 '12 at 17:52

Don

21
2

puh. that was long ago... I went with clipping on this. – frequent Apr 29 '12 at 17:56

score 0 · Answer 2 · answered Nov 02 '11 at 00:29

0

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;
}

answered Nov 02 '11 at 00:29

theDazzler

1,039
2
11
27

Sorry, doesn't work. I just replaced the with a just to see what happens. This works, but I'd rather find a way to keep the – frequent Nov 02 '11 at 00:32

score 0 · Accepted Answer · answered Nov 02 '11 at 00:44

0

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

answered Nov 02 '11 at 00:44

kojiro

74,557
19
143
201

just to add some more info. While this works fine in IE7+, FF, Chrome, Safari and iOS, it does not work on Android. – frequent Nov 02 '11 at 10:05

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

3 Answers3