CSS Sprite issue

Question

I'm fighting with some CSS here that doesn't want to be crowbarred into submission. I just want the sprites there, without a border around it, and to lower the opacity when hovered over.

Here's how it looks across browsers so far:

The Chrome version is closest to what I want, but I can't get the border to disappear, and the hover opacity doesn't do anything.

Code-wise, here's where I'm at so far:

.social-icons {
  background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
  width: 32px;
  height: 32px;
}

.social-icons img {
  border-style: none;
}

.social-icons img:hover {
  opacity: 0.8;
}

img#facebook-ico.social-icons {
  background-position: 0px 0px;
}

img#twitter-ico.social-icons {
  background-position: -34px 0px;
}

img#google-plus-ico.social-icons {
  background-position: -68px 0px;
}

img#rss-ico.social-icons {
  background-position: -136px 0px;
}

Answer 1

I do not know why, but the fact that you have empty image elements (no 'src') somehow causes the borders. I would remove the image elements and place the backgrounds directly on the anchor tags. Then float and adjust margins as needed:

<a href="https://www.facebook.com/MeanwhileInAmerica" title="Meanwhile, In America on Facebook" target="_blank"></a>

.widget-container a:hover {
    background: url('/wp-content/themes/MeanwhileInAmerica/images/social-profiles/social-profiles-s.png') top left no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    float: left;
}

.widget-container a {
    opacity(0.8);
}

I tested it with Dev Tools... the border was gone and the opacity change worked too.

You may have to target your elements differently to avoid changing other parts of the page. The sprites look fine otherwise.

EDIT According to: http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src "The src attribute must be present".