title: IE not respecting :hover on element
body: <p>Work on the following website: <a href="http://cetcolor.com" rel="noreferrer">http://cetcolor.com</a></p>
  
  <p>The masthead graphic with the "Read About It" button has a positioned link with hover that when rolled over displays an orange button graphic and is a clickable link.</p>
  
  <p>However, in IE browsers it's not working.</p>
  
  <p>Here is the affected HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;a href="/" title="CET Color"&gt;&lt;img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"&gt;&lt;/a&gt;
      &lt;span class="strapline"&gt;Affordable Large-format UV Printing Solutions&lt;/span&gt;
      &lt;a href="/pressroom_article8" class="read_about_it"&gt;&lt;/a&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the referenced CSS:</p>
  
  <pre><code>#header .read_about_it {
      position: absolute;
      top: 239px;
      left: 803px;
      z-index: 100;
      width: 114px;
      height: 17px;
  }
  #header .read_about_it:hover {
      background-image: url(/images/masthead_index_read_about_i.jpg);
      background-repeat: no-repeat;
      cursor: pointer;
      z-index: 101;
  }
  </code></pre>
  
  <p>Does anyone have any idea why the hover isn't working in IE browsers?</p>