Looks good in Firefox but not IE (Internet Explorer).

Looks good in Firefox but not IE (Internet Explorer).

I have jCarousel 0.2.8 working with jQuery 1.7.1 and jQuery UI 1.8.11 in my Drupal 7 module perfectly in Firefox. However, the carousels are not working properly in Internet Explorer 7, 8, 9 and 10. What can I do to get them to load properly in both browsers? Screenshots of what it looks like in FF and IE are attached. Below is my JavaScript/jQuery code. Note that since it is a Drupal site, jQuery() is used instead of $().

You can test the issue described at my website:
[demo link removed]


Any help getting this fixed in IE would be very much appreciated! Thanks!!
  1. function select_avatar(image, button) {
        image.input.prop('checked', true);

        jQuery('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" });

        var src = button.attr("src");
       
        button.parent().parent().find("li img").each(
            function(index) {
                if(jQuery(this).attr("src") == src)
                jQuery(this).addClass("avatar_select");
                else
                jQuery(this).removeClass("avatar_select");
            }
        );
    }

    function unselect_avatar(image, button) {
       
        image.input.prop('checked', false);
       
        //select empty
        jQuery('#default_input_'+image.id).prop('checked', true);
       
        jQuery('#layer_'+image.id).css({ backgroundImage: "none" });
           
        var src = button.attr("src");
       
        button.parent().parent().find("li img").each(
            function(index) {
                if(jQuery(this).attr("src") == src)
                jQuery(this).removeClass("avatar_select");
            }
        );
    }

    function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
        // carousel.data is empty on page load
         var data = carousel.data;

        // True on page load
         if(!data) {
            // cid is name of carousel, user_avatar_select_X
             var cid = carousel.list.attr('id').substring(9);
            var data = new Array();
           
            // For each img element in ID user_avatar_select_X
            jQuery('#'+cid+' img').each(
                // Provide index # for each iteration of loop
                function(index) {
                    // Sets input to the input element nearby the img element
                    // Note: Parent element is a label element
                    var input = jQuery(this).parent().siblings('input');
                    // Sets url to the src of the img element
                    var url = jQuery(this).attr('src');
                   
                    // If the img is selected, apply the img to ID layer_user_avatar_select_X
                    // (which is on the picture)
                    if(input.is(':checked')) {
                            jQuery('#layer_'+cid).css({ backgroundImage: "url("+url+")" });                   
                    }
                   
                    // Adds variables to the data array
                    data.push({id: cid, input: input, image: jQuery(this), url: url});
                });
           
            // Stores data array in carousel
            carousel.data = data;
           
            // Adds html to ID user-edit
            // Adds input with ID default_input_user_avatar_select_X
            // and name select_avatar_X
            jQuery('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>');
        }

        var idx = carousel.index(i, data.length);
        var image = data[idx - 1];
       
        var img = image.image.clone();
       
        if(image.input.is(':checked'))
            img.addClass("avatar_select");
       
        carousel.add(i, img);
       
        img.hover(
            function(){jQuery(this).addClass("avatar_hover");},
            function(){jQuery(this).removeClass("avatar_hover");}
          );
       
        img.click(
            function () {
                if(image.input.is(':checked'))
                    unselect_avatar(image, jQuery(this));
                else
                    select_avatar(image, jQuery(this));
            }
        );
    };

    function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
        carousel.remove(i);
    };

    function mycarousel_init(list) {
        // list parameter is ID user_avatar_select_X radio buttons and images
        // If list isn't valid, bail out
        if(!list.attr('id'))
            return;

        // Add layer to picture for each list (ccrresponding to the choices for avatars)
        jQuery(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>');

        // Adds UL carousel_X with Tango Skin to each list
        list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>');
       
        // Creates carousel for each list
        jQuery('#carousel_'+list.attr('id')).jcarousel({
            scroll: 3,
            visible: 3,
            wrap: 'circular',
            //itemLoadCallback: itemLoadCallbackFunction,
            itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
            itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
        });
    }

      jQuery(document).ready(function () {
        // Hide original ID user_avatar_select_X radio buttons and images
        // since we want them to be in carousels instead
          jQuery('div.user_avatar_select').parent().hide();
     
          for(var i=0;i<10;i++) {
            // Create a carousel based on ID user_avatar_select_X
            mycarousel_init(jQuery('#user_avatars_select_'+i));
          }
       
        // Hide the picture with ID current, since the user may want to build a new avatar
          jQuery(".picture #current").css({display: "none"});
         
        // Show the default avatar, so the user can build a new avatar
        // Selected layers for the current avatar will be added on top
          jQuery(".picture").css({"position": "relative", "width": "200px", "height": "199px", "background-image": "url(/sites/default/files/default_avatar.gif)"});
      });