Remove border around sprite image in Chrome

css image google-chrome border sprite
Z with a Z picture Z with a Z · Feb 7, 2012 · Viewed 17.9k times · Source

First time using this technique, seems that regardless what attributes I try to assign the border will not go away in Chrome. Other browsers are fine. I've tried outline:none, border:0; etc, etc. Also tried adding a colored border around the image, and noticed the the black border was still there within the colored border. Doesn't seem to want to go away.

Work-around's or advice much appreciated.

.share-link {
display: block;
width: 41px;
height: 32px;
text-decoration: none;
background: url("link-icon.png");
}

.share-link:hover {
background-position: -41px 0;
}


<a title="Share this Link" href="#"><img class="share-link"></a>

Answer

Scott picture Scott · Feb 7, 2012

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.

Demo here.

Related questions

Removing the image border in Chrome/IE9

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS: outline: none; border: none; Using jQuery, I also added a border=0 attribute on every image tag. But …

Read More
image moves on hover - chrome opacity issue

There seems to be an issue with my page here: http://www.lonewulf.eu When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome. My css: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.…

Read More
content attribute of img elements

While inspecting the Chrome Dev tools, I noticed the following CSS fragment: img { content: url(image-src.png); } which works perfectly in Chrome (see Screenshot below). This allows me to define the src attribute of an <img> tag via …

Read More