title: IE flicker on hover
body: <p>First note, yes i searched the forum for this, but they all related to jQuery flicker-ings...</p>
  
  <p>FF and Chrome work fine... I get a flicker on hover over the ".social" links...and can not remove the background on hover...</p>
  
  <p>Is this just an IE bug?</p>
  
  <p>I thought be declaring the class ."social" that they would not inherit the background gradient as the other a links do...???</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="headerWrap"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ACADEMY INFO&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;TRANING VIDEOS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;ABOUT ALLIANCE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;BJJ BLOG&lt;/a&gt;&lt;/li&gt;          
        &lt;li&gt;&lt;a class="contact" href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
        &lt;li class="last"&gt;
            &lt;a class="social" href="#"&gt;&lt;img src="facebook.png"&gt;&lt;/a&gt;
            &lt;a class="social" href="#"&gt;&lt;img src="youtube.png"&gt;&lt;/a&gt;
            &lt;a class="social" href="#"&gt;&lt;img src="twitter-2.png"&gt;&lt;/a&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>