Имам странен проблем с jQuery Cycle Plugin Pager и IE7 и 8

Създавам сайт с помощта на приставката Cycle и използвам миниатюрни изображения като пейджъри. Работи чудесно във Firefox, Chrome и IE9. В IE8 и 7 обаче имам наистина странен проблем.

Първото изображение на пейджъра и слайдшоуто се зареждат добре. Когато щракна върху втората миниатюра, за да заредя второто изображение, слайдшоуто става бяло (изглежда сякаш не зарежда изображение или се опитва да зареди изображение, което не може да намери, не е напълно сигурно), когато щракна върху третото миниатюра, зарежда второто изображение в слайдшоуто. Този модел на незареждане на изображение и след това зареждане на грешното изображение продължава през цялото слайдшоу.

Ето действителния jQuery:

$(document).ready(function() {
    $('#gallery').cycle({
        fx: 'scrollHorz',
        speed: 500,
        timeout: 0,
        pager: '#slide_navigation',
        pagerAnchorBuilder: function(idx, slide) {
            return '#slide_navigation li:eq(' + idx + ') a';
        }
    });
    $("#left").click(function() {
        $("#slide_navigation").animate({"marginLeft": "+=960px"}, "slow");
        $("#left").hide();
        $("#right").show();
    });
    $("#right").click(function() {
        $("#slide_navigation").animate({"marginLeft": "-=960px"}, "slow");
        $("#right").hide();
        $("#left").show();
    });

Ето CSS за страницата:

#slide_navigation {
    width: 2000px;
    padding: 10px 0;
    border:  1px #909090;
    border-style: solid none;
}
#slide_navigation li {
    list-style: none;
    display: inline;
    margin: 5px;
    padding: 52px 3px 0px 3px;
}
#slide_navigation li:first-child {
    margin-left: 25px;
}
#slide_navigation li.activeSlide {
    background: #F68009;
}
#left {
    width: 20px;
    height: 75px;
    float: left;
    background: #FFFFFF url(prev1.png) no-repeat center;
    position: relative;
    top: -85px;
    left: -3px;
    margin-bottom: -85px;
    display: none;
}
#right {
    width: 20px;
    height: 75px;
    float: right;
    background: #FFFFFF url(next1.png) no-repeat center;
    position: relative;
    top: -85px;
    right: -3px;
    margin-bottom: -85px;
}

И за всеки случай - Той е HTML за пейджъра:

<div id="slide_navigation">
    <li><a href="/bg#"><img src=support-1.jpg></a></li>
    <li><a href="/bg#"><img src=support-2.jpg></a></li>
    <li><a href="/bg#"><img src=support-3.jpg></a></li>
    <li><a href="/bg#"><img src=support-4.jpg></a></li>
    <li><a href="/bg#"><img src=support-5.jpg></a></li>
    <li><a href="/bg#"><img src=support-6.jpg></a></li>
    <li><a href="/bg#"><img src=support-7.jpg></a></li>
    <li><a href="/bg#"><img src=support-8.jpg></a></li>
    <li><a href="/bg#"><img src=support-9.jpg></a></li>
    <li><a href="/bg#"><img src=support-10.jpg></a></li>
    <li><a href="/bg#"><img src=support-11.jpg></a></li>
    <li><a href="/bg#"><img src=support-12.jpg></a></li>
    <li><a href="/bg#"><img src=support-13.jpg></a></li>
    <li><a href="/bg#"><img src=support-14.jpg></a></li>
    <li><a href="/bg#"><img src=support-15.jpg></a></li>
    <li><a href="/bg#"><img src=support-16.jpg></a></li>
</div>
<div id="left" class="cursorPointer"></div>
<div id="right" class="cursorPointer"></div>

Левият и десният идентификатор се използват за подпомагане на навигацията на плъзгача. Не мисля, че е свързано, но предоставям колкото мога повече информация. Всяка помощ ще бъде високо оценена.

Благодаря!