Internet Explorer 8 producing strange CSS bug on :hover <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>