jQuery looks/works good in Firefox but not IE (Internet Explorer)

Question

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!!

Firefox and IE screenshots

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)"});
});

Answer 1

In CSS I set a specific height and width for the images in the carousel and that fixed it. They had height: auto but that wasn't good enough for IE I guess.