title: Nivo Slider forcing background colour in Chrome/Firefox - IE works fine
body: <p>I've exhausted a fair amount of time investigating this issue and found nothing that has helped, so I'm posting the question here in hope someone may be able to assist. </p>
  
  <p>I've had this issue for a while now but finally found some time to try and resolve the issue. I created our SharePoint based company intranet a few years ago now which was designed for IE as its our corporate browser. Over the past few months there has been an increase in other browsers for various processes, Chrome in particular. </p>
  
  <p>The Nivo Slider on our main portal within IE (9 &amp; 11) works as expected. Images are displayed and rotated as designed.</p>
  
  <p>The issue I have is within Chrome and Firefox the slider does not display the images at all. </p>
  
  <p>EDIT: this section within the CSS <code>#slider {position:relative; background:#202834;}</code> is forcing the background colour over the image. I've tried to comment out the bg colour from slider css which has not resolved the issue, it displays a white background instead. /EDIT </p>
  
  <p>The images still rotate within the slider, it's just that the image itself does not appear, example below:</p>
  
  <p><img src="https://i.imgur.com/pqeEwwo.png" alt="Example"></p>
  
  <p>I've played around with a few options within the CSS and changed the <code>window.load</code> to <code>document.ready</code> but to no avail. I definitely know it's one of these settings within the CSS, but having a hard time finding out which one is the culprit.</p>
  
  <p>I've attached a copy of the script below which is pretty much untouched from the source code found online:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(window).load(function() {
  
   $('#slider').nivoSlider({
      effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
      slices: 15, // For slice animations
      boxCols: 8, // For box animations
      boxRows: 4, // For box animations
      animSpeed: 300, // Slide transition speed
      pauseTime: 6000, // How long each slide will show
      startSlide: 0, // Set starting Slide (0 index)
      directionNav: false, // Next &amp; Prev navigation
      directionNavHide: false, // Only show on hover
      controlNav: true, // 1,2,3... navigation
      controlNavThumbs: false, // Use thumbnails for Control Nav
      controlNavThumbsFromRel: false, // Use image rel for thumbs
      controlNavThumbsSearch: '.jpg', // Replace this with...
      controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
      keyboardNav: true, // Use left &amp; right arrows
      pauseOnHover: true, // Stop animation while hovering
      manualAdvance: false, // Force manual transitions
      captionOpacity: 0.0, // Universal caption opacity
      prevText: 'Prev', // Prev directionNav text
      nextText: 'Next', // Next directionNav text
      beforeChange: function() { }, // Triggers before a slide transition
      afterChange: function() { }, // Triggers after a slide transition
      slideshowEnd: function() { }, // Triggers after all slides have been shown
      lastSlide: function() { }, // Triggers when last slide is shown
      afterLoad: function() { } // Triggers when slider has loaded
     });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>/* Home Slider */
  #slideshow {height:303px; /*background: url('../../../Images/ss_back.png') no-repeat center; margin: 0 0 10px 0;*/}
  #slider {position:relative; background:#202834; }
  #slider a {border:0; display:block; }
  #slider img {position:absolute; top: 0; left: 0; display:none;}
  .nivoSlider {position:relative; top:15px; left:16px; width:100%;}
  .nivoSlider img {position: absolute; top:0px; left:0px;}
  .nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none;}
  .nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
  .nivo-caption {position:absolute; left:0; bottom:-55px; color:#666; font-size:14pt; width:100%; z-index:89;}
  .nivo-caption p {padding:0;margin:0;}
  .nivo-prevNav {left:5px;}
  .nivo-nextNav {right:5px;}
  .nivo-controlNav {position:absolute; right:30px; bottom:-55px;}
  .nivo-controlNav a {display:block; width:31px; height:23px; background:url('../../../Images/bullets.png') no-repeat; text-indent:-9999px; border:0; float:left; position:relative; z-index:99; cursor:pointer;}
  .nivo-controlNav a.active {background-position: -31px 0; font-weight:bold;}
  .nivo-directionNav a {display:block; width:50px; height:50px; text-indent:-9999px; border:0; position:absolute; top:45%; z-index:99; cursor:pointer;}
  a.nivo-nextNav {background: url('../../../Images/next.png'); right:40px;}
  a.nivo-prevNav {background: url('../../../Images/prev.png'); left:10px;}
  </code></pre>
  
  <p>I ran firebug with Firefox and have displayed the findings below. It didn't generate any console errors, but it did highlight certain areas within the NivoSlider div:</p>
  
  <p><img src="https://i.imgur.com/wwWGFtd.png" alt="NivoSlider div"></p>
  
  <p>One last thing I did notice is that when in IE developer tools, the document mode was set to IE8 standards which was fine. If I changed the document mode to IE9 then it would replicate the same issue within IE.</p>
  
  <p>Is there anyone who could identify from the information supplied why this may be occurring for Chrome and Firefox?</p>