title: Disappearing images in IE8 jQuery Cycle
body: <p><a href="http://www.lunatestsite.co.uk/products/lifestation" rel="noreferrer">http://www.lunatestsite.co.uk/products/lifestation</a></p>
  
  <p>Cannot for the life of me fix this. Only in IE8 so far. I had the same issue on the homepage cycle, but managed to fix by declaring width, height and background: none !important on the img's in question. </p>
  
  <p>I thought it might be a png issue, but the same happens with jpgs:</p>
  
  <p><a href="http://www.lunatestsite.co.uk/test-disappearing-jpgs" rel="noreferrer">http://www.lunatestsite.co.uk/test-disappearing-jpgs</a></p>
  
  <p>Same result: often a flicker of the first of the two images in the slideshow, then disappears.</p>
  
  <p>Any ideas at all appreciated.</p>
  
  <p>SOLVED: My original fix worked for this in the end too : adding the background: none important!, and declaring the width / height. It didn't work on the additional templates because I was using a class instead of id for ul#product-images.</p>
  
  <p>The shame, it burns! Sorry for wasting anyone's time.</p>
  
  <pre><code>body.home #front-slider #front-slides .slide{
  background:none !important;
  width: 980px;
  height: 389px;
  }
  
  body.home #front-slider #front-slides .slide .slide-image img{
      background:none !important;
      width: 629px;
      height: 345px;
  }
  
  body.page-template-page-product-view-php ul#product-images .slide, body.page-template-page-product-view-wide-php ul#product-images .slide{
      background:none !important;
      width: 970px;
      height: 300px;
  }
  </code></pre>