Question

I’ve got a jquery problem with good old Internet Explorer (I’ve tested it in IE7, IE8 and IE9 and they all produce the same problem). I’m using the Nivo Slider plugin for a website. Only in IE it goes wrong. Somehow the image duplicates itself and pastes it next to each other (I am sorry for my bad English, you can see the problem below on the pictures).

How the image in the slider should look like:

How the image in the slider looks like in Internet Explorer:

You can find my code here: http://jsfiddle.net/skeurentjes/YszGW/10/

This is my Nivo Slider configuration:

$(document).ready(function() {    
    $('#photoSlider').nivoSlider({
        effect: 'fade',
        animSpeed: 1000,
        pauseTime: 5000,
        directionNav: true,
        controlNav: true,
        pauseOnHover: true,
        randomStart: true
});
});

I have no idea where to look. I don’t know if it is a javascript problem or a css problem. Every help will be appreciated.

Answer 1

EDIT: @Sparky pointed out that my answer didn’t help because you’re experiencing problems in all versions of IE, in which case the trailing comma fix wouldn’t help. My apologies.

However, I found some users that had the same problem you did. It looks like specifying slices: 1 instead of leaving it as default seems to fix it. Thread referenced below.

Nivo slider display issue in IE

EDIT2: Sparky made another good point in the comments below. Even if changing the slices ‘fixes’ the issue, it doesn’t mean it got rid of the original problem. Nivo slider comes with CSS that will make sure it looks and functions well in different browsers, so if you removed those it could definitely cause these problems. I would try putting back in the default CSS first to make sure you’re using the plugin as the devs intended.

If that doesn’t work hopefully the slices fix takes care of it for you though.