Overlaying div with png over slider

Overlaying div with png over slider

I have made a slider, not unlike other sliders, but I made my own. I have two versions, one vertical and one horizontal. Both of them let you slide through images with arrows back and forth / up and down.

I have the same problem with both however. In IE it doesn't show the png that I use for the "arrows" on mouseover left or right on the picture. I thought it was the div order problem, but the div is visible on top, it just doesn't show the picture is what it seems like. See the web page to take a look:

Link to page with slide gallery

The script is available with a view source down in the middle of the source but basically goes like this.

  1. $('#mainArticleImageContainer li img').eq('0').show();
     $('#mainArticleImageContainer li img').eq('0').css('zIndex','1000');
     
     var currentImage = 0;
     
     var totalImageCount = 12;
     $('#mainArticleImageContainer').append('<div id="imageCounter" style="position: absolute; bottom: 0px; left: 285px; color: #000; text-align: center; background-image: url(../images/image-counter.png); background-repeat: no-repeat; padding: 5px; width: 55px; height: 15px; z-index: 50000"><span id="countNumber">1</span> av '+totalImageCount+'</div>');
     
     var imageHeight = $('#mainArticleImageContainer').height();
     $('#mainArticleImageContainer').append('<div class="hoverAreaLeft" style="height: '+imageHeight+'px;"><img src="../images/image-nav-left.png" alt="Left" style="display: none; position: absolute; bottom: 6px; left: 8px;" /></div><div class="hoverAreaRight" style="height: '+imageHeight+'px;"><img src="../images/image-nav-right.png" alt="Right" style="display: none; position: absolute; bottom: 6px; right: 8px;" /></div>');
     $('#mainArticleImageContainer .hoverAreaLeft').css('opacity', '0');
     $('#mainArticleImageContainer .hoverAreaRight').css('opacity', '0');
     
     $('#mainArticleImageContainer').click(function(e) {
     var imageCount = $('#mainArticleImageContainer li img').length;
     imageCount = imageCount - 1;
     var position = $(this).position();
     var offset = $(this).offset();
     var x = e.pageX - (offset.left);
     
     /* Check the position of the mouse pointer and do according slide actions */
     if(x <= 312) {
     
     if(currentImage > 0) {
     currentImageIn = currentImage-1;
     newHeight = $('#mainArticleImageContainer li img').eq(currentImageIn).height();
     
     /* IE Mikk */
     $('#mainArticleImageContainer li img').eq(currentImageIn).parent('li').css('z-index', 20000).siblings('li').css('z-index',10000);
     $('#mainArticleImageContainer li img').eq(currentImage).parent('li').css('z-index', 15000);
     
     $('#mainArticleImageContainer').css('height',newHeight+'px');
     $('#mainArticleImageContainer .hoverAreaLeft').css('height',newHeight+'px');
     $('#mainArticleImageContainer .hoverAreaRight').css('height',newHeight+'px');
     $('#mainArticleImageContainer li img').eq(currentImageIn).css({position: 'absolute', left: '-625px', top: '0px', display: 'block', opacity: '.6'}); 
     $('#mainArticleImageContainer li img').eq(currentImageIn).animate({top: '0px', left: '0px', opacity: '1'},{easing: 'jswing',duration: '500'}, 400);
     $('#mainArticleImageContainer li img').eq(currentImage).animate({top: '0px', left: '625px', opacity: '.6'},{easing: 'jswing',duration: '500'}, 400);
     setTimeout(function (currentImage) {
     $('#mainArticleImageContainer li img').eq('currentImage').hide();
     }, 400);
     } else {
     return false;
     }
     currentImage = currentImage - 1;
     realCurrentImage = currentImage + 1;
     $('#mainArticleImageContainer #imageCounter span#countNumber').replaceWith('<span id="countNumber">'+realCurrentImage+'</span>');
     
     } else if (x >= 313) {
     
     if(currentImage == imageCount) {
     return false;
     } else { 
     currentImageIn = currentImage+1;
     newHeight = $('#mainArticleImageContainer li img').eq(currentImageIn).height();
     /* IE Mikk */ 
     $('#mainArticleImageContainer li img').eq(currentImageIn).parent('li').css('z-index', 20000).siblings('li').css('z-index',10000);
     $('#mainArticleImageContainer li img').eq(currentImage).parent('li').css('z-index', 15000);
     
     $('#mainArticleImageContainer .hoverAreaLeft').css('height',newHeight+'px');
     $('#mainArticleImageContainer .hoverAreaRight').css('height',newHeight+'px');
     $('#mainArticleImageContainer li img').eq(currentImageIn).css({position: 'absolute', left: '625px', top: '0px', display: 'block', opacity: '.6'});
     $('#mainArticleImageContainer').animate({height: newHeight+'px'});
     $('#mainArticleImageContainer li img').eq(currentImageIn).animate({top: '0px', left: '0px', opacity: '1'},{easing: 'jswing',duration: '500'}, 400);
     $('#mainArticleImageContainer li img').eq(currentImage).animate({top: '0px', left: '-625px', opacity: '.6'},{easing: 'jswing',duration: '500'}, 400);
     setTimeout(function (currentImage) {
     $('#mainArticleImageContainer li img').eq('currentImage').hide();
     }, 400); 
     }
     currentImage = currentImage + 1; 
     realCurrentImage = currentImage + 1;
     $('#mainArticleImageContainer #imageCounter span#countNumber').replaceWith('<span id="countNumber">'+realCurrentImage+'</span>');
     }
     });
     
     
     function leftSlideLeft() {
     if(currentImage > 0) {
     $('#mainArticleImageContainer .hoverAreaLeft').css('background','url(../images/image-nav-bg.png) no-repeat top left');
     $('#mainArticleImageContainer .hoverAreaLeft img').css('display','block');
     $('#mainArticleImageContainer .hoverAreaLeft').animate({opacity: '1'}, 400);
     }
     }
     function leftSlideNone() { 
     $('#mainArticleImageContainer .hoverAreaLeft').animate({opacity: '0'}, 200);
     $('#mainArticleImageContainer .hoverAreaLeft img').css('display','none');
     setTimeout(function() {
     $('#mainArticleImageContainer .hoverAreaLeft').css('background','none');
     }, 200); 
     }
     function rightSlideRight() {
     var imageCount = $('#mainArticleImageContainer li img').length;
     imageCount = imageCount - 1;
     if(currentImage < imageCount) {
     $('#mainArticleImageContainer .hoverAreaRight').css('background','url(../images/image-nav-bg.png) no-repeat top right');
     $('#mainArticleImageContainer .hoverAreaRight img').css('display','block');
     $('#mainArticleImageContainer .hoverAreaRight').animate({opacity: '1'}, 400);
     }
     }
     function rightSlideNone() {
     $('#mainArticleImageContainer .hoverAreaRight').animate({opacity: '0'}, 200);
     $('#mainArticleImageContainer .hoverAreaRight img').css('display','none');
     setTimeout(function() {
     $('#mainArticleImageContainer .hoverAreaRight').css('background','none');
     }, 200);
     }
     
     var configLeft = { 
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
     interval: 100, // number = milliseconds for onMouseOver polling interval 
     over: leftSlideLeft, // function = onMouseOver callback (REQUIRED) 
     timeout: 200, // number = milliseconds delay before onMouseOut 
     out: leftSlideNone // function = onMouseOut callback (REQUIRED) 
     };
     var configRight = { 
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) 
     interval: 100, // number = milliseconds for onMouseOver polling interval 
     over: rightSlideRight, // function = onMouseOver callback (REQUIRED) 
     timeout: 200, // number = milliseconds delay before onMouseOut 
     out: rightSlideNone // function = onMouseOut callback (REQUIRED) 
     };
     $("#mainArticleImageContainer .hoverAreaLeft").hoverIntent(configLeft);
     $("#mainArticleImageContainer .hoverAreaRight").hoverIntent(configRight);