title: IE8 Transparent PNG problems in Nivo Slider using background-image for Prev and Next Buttons
body: <p>I'm using the <a href="http://nivo.dev7studios.com/" rel="nofollow noreferrer">nivo slider</a> on <a href="http://www.designlagoon.com/" rel="nofollow noreferrer">our site</a></p>
  
  <p>It's working great on all devices except for IE8 on XP, which due to the infamous IE transparent png issue, I get black borders around the prev and next buttons on rollover. The prev and next buttons need to be transparent pngs as they have a drop-shadow and are placed on top of transitioning images.</p>
  
  <p><strong>The Arrows</strong>
  <img src="https://i.stack.imgur.com/0wr68.png" alt="enter image description here"></p>
  
  <p><strong>The Problem IN IE8 XP</strong>
  <img src="https://i.stack.imgur.com/VMI2t.jpg" alt="enter image description here"></p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;div class="nivo-directionNav"&gt;
      &lt;a class="nivo-prevNav" style="display: none;"&gt;&lt;/a&gt;
      &lt;a class="nivo-nextNav" style="display: none;"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The CSS</strong> </p>
  
  <pre><code>.nivo-directionNav a {
      position:absolute;
      z-index:9;
      cursor:pointer;
      }
  
  /* the arrows are taken from a single sprite with a standard and active image
  for prev and next with the background-position changed on rollover   */
  
  .nivo-prevNav, .nivo-nextNav {
      width: 80px;
      height: 100%;
      }
  
  .nivo-prevNav {
      left:0px;
      background: url("images/nivo_4_arrows.png") no-repeat 0 0;
      }
  
  
  .nivo-prevNav:hover {
      background: url("images/nivo_4_arrows.png") no-repeat -80px 0;
      }
  </code></pre>
  
  <p>I have tried to implement this javascript as a fix:</p>
  
  <pre><code>var i;
  for (i in document.images) {
  if (document.images[i].src) {
      var imgSrc = document.images[i].src;
      if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') {
          document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
      }
  }
  }
  </code></pre>
  
  <p>...as well as <a href="https://gist.github.com/1318344" rel="nofollow noreferrer">this plugin</a> found on a similar post on this forum but neither have proved successful.</p>
  
  <p>Been wasting lots of time on this so I'd really appreciate anyone that can shed some light on a fix!</p>