title: IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
body: <p>I have been struggling to find out why this rollover is not behaving as it should in IE8.</p>
  
  <p>Go here: <a href="http://baked-beans.tv" rel="noreferrer">http://baked-beans.tv</a> in IE8, you'll see that the rollover only works on the lower half of the thumbnails. </p>
  
  <p>Btw, this is not activated by an <code>&lt;a&gt;</code> tag but by a <code>:hover</code> for the <code>&lt;div&gt;</code>.</p>
  
  <p>What I can't figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)</p>
  
  <p>As soon as I change the <code>background-color</code> to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when I set bg-color to transparent?! Gotta love Internet Explorer.</p>
  
  <p>This works as it should on every other browser (the entire square acts as a rollover)</p>
  
  <p>Here's the CSS:</p>
  
  <pre><code>.cat_rollout {
      position: absolute;
      float:left;
      top:0;
      left:0;
      min-height:274px;
      min-width:274px;
      font-size: 0;
      background-color: transparent;
  }
  
  .cat_rollout:hover {
      background-image: url(images/rollover.png);
      min-width:254px;
      min-height:242px;
      padding-left: 20px;
      color: white;
      font-size: 21px;
      font-weight: normal;
      line-height: 24px;
      padding-top: 34px;
  }
  </code></pre>