title: Internet Explorer 8 producing strange CSS bug on :hover
body: <p>I'm working on website development, styling a breadcrumb trail with CSS at the moment. However, I came across this strange bug in Internet Explorer 8, and I can't figure out why it's happening. To illustrate, here are some images:</p>
  
  <p>This is what one of the breadcrumbs is supposed to look like when hovered over: <a href="http://i.imgur.com/Lrr5Qo0.png" rel="nofollow">http://i.imgur.com/Lrr5Qo0.png</a> (image taken in Chrome)</p>
  
  <p>In Internet Explorer, this is what it looks like when hovering: <a href="http://i.imgur.com/V5dzdcX.png" rel="nofollow">http://i.imgur.com/V5dzdcX.png</a></p>
  
  <p>It displays fine before hovering, but as soon as the mouse goes over it, it goes nuts.</p>
  
  <p>I've gone through the CSS code, and the only attributes related to :hover are color, background, overflow, and text-decoration. There is nothing to do with margin, padding, height, etc.</p>
  
  <p>What could possible be causing this?</p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;div class="headtitle pull-left"&gt;
      &lt;h1 id="pageTitle" class="ms-core-pageTitle"&gt;
  
      CX Team
  
      &lt;/h1&gt;
      &lt;ul class="s4-breadcrumb"&gt;
          &lt;li class="s4-breadcrumbRootNode"&gt;
              &lt;span class="s4-breadcrumb-arrowcont"&gt;
                  &lt;img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /&gt;
              &lt;/span&gt;
              &lt;a class="s4-breadcrumbRootNode" href="/sites/cc/Pages/index.aspx"&gt;Connect&lt;/a&gt;
              &lt;ul class="s4-breadcrumbRootNode"&gt;
                  &lt;li class="s4-breadcrumbNode"&gt;
                      &lt;span class="s4-breadcrumb-arrowcont"&gt;
                          &lt;img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /&gt;
                      &lt;/span&gt;
                      &lt;a class="s4-breadcrumbNode" href="/sites/cc/residential/Pages/index0709-9951.aspx"&gt;Residential&lt;/a&gt;
                      &lt;ul class="s4-breadcrumbNode"&gt;
                          &lt;li class="s4-breadcrumbNode"&gt;
                              &lt;span class="s4-breadcrumb-arrowcont"&gt;
                                  &lt;img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /&gt;
                              &lt;/span&gt;
                              &lt;a class="s4-breadcrumbNode" href="/sites/cc/residential/customerexperience/Pages/default.aspx"&gt;Customer Experience&lt;/a&gt;
                              &lt;ul class="s4-breadcrumbNode"&gt;
                                  &lt;li class="s4-breadcrumbCurrentNode"&gt;
                                      &lt;span class="s4-breadcrumb-arrowcont"&gt;
                                          &lt;img src="/_layouts/images/nodearrow.png" alt="" style="border-width:0px;display:inline-block;padding-top:4px;" /&gt;
                                      &lt;/span&gt;
                                      &lt;a class="s4-breadcrumbCurrentNode" href="/sites/cc/residential/customerexperience/Pages/CX-Team.aspx"&gt;CX Team&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I unfortunately don't have control over this; it is created dynamically by Sharepoint (which I am forced to use).</p>
  
  <p>CSS:
  </p>
  
  <pre><code>.s4-breadcrumb a:hover {
      overflow:auto\9;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9900', endColorstr='#FF6600');
      background-image:-moz-linear-gradient(top,#F90,#F60);
      background-image:-webkit-gradient(linear,0 0,0 100%,from(#F90),to(#F60));
      background-image:-o-linear-gradient(top,#F90,#F60);
      background-image:linear-gradient(to bottom,#F90,#F60);
  }
  
  .v4master .s4-breadcrumbNode a,
  .v4master .s4-breadcrumbCurrentNode a,
  .v4master .s4-breadcrumbRootNode a,
  .v4master .s4-breadcrumbNode a:hover,
  .v4master .s4-breadcrumbCurrentNode a:hover,
  .v4master .s4-breadcrumbRootNode a:hover {
      color:white !important;
  }
  
  ul.s4-breadcrumb,
  ul.s4-breadcrumb ul {
      line-height:normal;
  }
  
  ul.s4-breadcrumb a {
      line-height:40px;
  }
  
  ul.s4-breadcrumb,
  ul.s4-breadcrumb ul {
      margin-bottom:0;
  }
  
  ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
      margin-bottom:14px;
  }
  
  ul.s4-breadcrumb,
  ul.s4-breadcrumb ul {
      margin-left:0;
  }
  
  ul.s4-breadcrumb,
  ul.s4-breadcrumb ul {
      margin-right:0;
  }
  
  ul.s4-breadcrumb,
  ul.s4-breadcrumb ul {
      margin-top:0;
  }
  
  ul.s4-breadcrumb .s4-breadcrumb-arrowcont {
      margin-top:10px;
  }
  
  .s4-breadcrumb a {
      padding-left:5px;
  }
  
  .headtitle &gt; ul.s4-breadcrumb {
      padding-left:10px;
  }
  
  .headtitle &gt; ul.s4-breadcrumb {
      padding-left:0\9;
  }
  
  .s4-breadcrumb {
      padding-left:15px;
  }
  
  .s4-breadcrumb a {
      padding-right:5px;
  }
  
  .s4-breadcrumb {
      padding-right:15px;
  }
  
  .s4-breadcrumb a:hover {
      text-decoration:none;
  }
  </code></pre>