IE flicker on hover

Question

First note, yes i searched the forum for this, but they all related to jQuery flicker-ings...

FF and Chrome work fine... I get a flicker on hover over the ".social" links...and can not remove the background on hover...

Is this just an IE bug?

I thought be declaring the class ."social" that they would not inherit the background gradient as the other a links do...???

HTML:

<div id="headerWrap">
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ACADEMY INFO</a></li>
      <li><a href="#">TRANING VIDEOS</a></li>
      <li><a href="#">ABOUT ALLIANCE</a></li>
      <li><a href="#">BJJ BLOG</a></li>          
      <li><a class="contact" href="#">CONTACT US</a></li>
      <li class="last">
          <a class="social" href="#"><img src="facebook.png"></a>
          <a class="social" href="#"><img src="youtube.png"></a>
          <a class="social" href="#"><img src="twitter-2.png"></a>
      </li>
   </ul>
</div>

CSS:

#headerWrap {
    background: url("../images/separator.png") no-repeat scroll right top transparent;
    margin: 0 auto;
    width: 960px;
}
#headerWrap ul {
    background: url("../images/separator.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    height: 50px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#headerWrap ul li {
    background: url("../images/separator.png") no-repeat scroll right top transparent;
    float: left;
    height: 50px;
}
#headerWrap ul li.last {
    background: none repeat scroll 0 0 transparent;
}
#headerWrap ul li a {
    color: #FFFFFF;
    display: block;
    font-weight: bold;
    height: 35px;
    padding: 15px 20px 0;
    text-decoration: none;
}
#headerWrap ul li a:hover {
    background: -moz-linear-gradient(center top , #CACA5A, #909501) repeat scroll 0 0 transparent;
    color: #FFFFFF;
    cursor: pointer;
    font-family: Arial,sans-serif;
    font-weight: bold;
    height: 35px;
    outline: medium none;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#headerWrap ul li a.social {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 15px 10px 0;
    width: 50px;
}

Answer 1

Try this:

#headerWrap ul li a.social,
#headerWrap ul li a.social:hover {
    background: none repeat scroll 0 0 transparent;
    float: left;
    padding: 15px 10px 0;
    width: 50px;
}