css - Nivo Slider forcing background colour in Chrome/Firefox - IE works fine -

i've exhausted fair amount of time investigating issue , found nothing has helped, i'm posting question here in hope may able assist.

i've had issue while found time try , resolve issue. created our sharepoint based company intranet few years ago designed ie our corporate browser. on past few months there has been increase in other browsers various processes, chrome in particular.

the nivo slider on our main portal within ie (9 & 11) works expected. images displayed , rotated designed.

the issue have within chrome , firefox slider not display images @ all.

edit: section within css #slider {position:relative; background:#202834;} forcing background colour on image. i've tried comment out bg colour slider css has not resolved issue, displays white background instead. /edit

the images still rotate within slider, it's image not appear, example below:

i've played around few options within css , changed window.load document.ready no avail. know it's 1 of these settings within css, having hard time finding out 1 culprit.

i've attached copy of script below pretty untouched source code found online:

<script type="text/javascript">  $(window).load(function() {   $('#slider').nivoslider({     effect: 'random', // specify sets like: 'fold,fade,slicedown'     slices: 15, // slice animations     boxcols: 8, // box animations     boxrows: 4, // box animations     animspeed: 300, // slide transition speed     pausetime: 6000, // how long each slide show     startslide: 0, // set starting slide (0 index)     directionnav: false, // next & prev navigation     directionnavhide: false, // show on hover     controlnav: true, // 1,2,3... navigation     controlnavthumbs: false, // use thumbnails control nav     controlnavthumbsfromrel: false, // use image rel thumbs     controlnavthumbssearch: '.jpg', // replace with...     controlnavthumbsreplace: '_thumb.jpg', // ...this in thumb image src     keyboardnav: true, // use left & 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 slide transition     afterchange: function() { }, // triggers after slide transition     slideshowend: function() { }, // triggers after slides have been shown     lastslide: function() { }, // triggers when last slide shown     afterload: function() { } // triggers when slider has loaded    }); }); 

/* 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 {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 {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 {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;} 

i ran firebug firefox , have displayed findings below. didn't generate console errors, did highlight areas within nivoslider div:

one last thing did notice when in ie developer tools, document mode set ie8 standards fine. if changed document mode ie9 replicate same issue within ie.

is there identify information supplied why may occurring chrome , firefox?

do inspect elementin google chrome , make sure there background-color applied in image.... or else better post fiddle