jQuery В Internet Explorer 7, 8 и 9 отсутствует горизонтальный аккордеон с шестью картинками?

Question

Я следовал этому руководству, чтобы создать горизонтальный аккордеон JQuery. Работает нормально, но в IE 7, 8 и 9 отсутствуют две картинки (их 6), как вы можете видеть на живом сайте:

http://brianfunshine.com/

HTML:

    <div class="jimgMenu">
        <ul>
            <li id="landscapes"><a href="http://alexchen.info/brianfunshine/events/jazz-shows/">Landscapes</a></li>
            <li id="people"><a href="http://alexchen.info/brianfunshine/events/kid-events/">People</a></li>
            <li id="nature"><a href="http://alexchen.info/brianfunshine/voice-demos/">Nature</a></li>
            <li id="abstract"><a href="http://alexchen.info/brianfunshine/music-2/commercial-music-production/">Abstract</a></li>
            <li id="urban"><a href="http://alexchen.info/brianfunshine/about/">Urban</a></li>
            <li id="people2"><a href="http://alexchen.info/brianfunshine/2011/05/gallery-test/">People2</a></li>
        </ul>
     </div>

JS:

    /**
     * Horizontal Slider
     */
    $j('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});

Заголовок:

<link href="css/jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>

CSS:

.jimgMenu {
    position:relative;
    margin: 0 0 0 1px;
    padding: 0px;
    width: 958px;
    height :200px;
    overflow: hidden;
}
.jimgMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    height: 170px;
    position: relative;
    }
.jimgMenu ul li {
    width: 160px;
    float: left;
    display: block;
    overflow: hidden;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background: #fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor: pointer;
    display: block;
    overflow: hidden;
    height: 200px;
}
.jimgMenu ul li#landscapes a {
    background: url(../images/landscapes.png) repeat scroll 0% !important;
}
.jimgMenu ul li#people a {
    background: url(../images/people.png) repeat scroll 0% !important;
}

.jimgMenu ul li#nature a {
    background: url(../images/nature.png) repeat scroll 0% !important;
}
.jimgMenu ul li#abstract a {
    background: url(../images/abstract.png) repeat scroll 0% !important;
}
.jimgMenu ul li#urban a {
    background: url(../images/urban.png) repeat scroll 0% !important;
}
.jimgMenu ul li#people2 a {
    background: url(../images/people2.png) repeat scroll 0% !important;
}

(все работает нормально в Chrome и Firefox).

(Я нахожусь на Linux, поэтому я не могу предоставить вывод IE извините.)

EDIT:

Все изображения появляются, если списки <li> теги имеют 100px ширины . Я думаю, что есть переполнение: скрытая проблема. Но я попытался применить ширину почти ко всем элементам, не повезло).

Answer 1

Вот эта строка здесь:

<!--[if IE]>
<style type="text/css">.jimgMenu {
position:relative;
width:630px; /* <<< Right here */
height:200px;
overflow:hidden;
margin-left:20px;
}
</style>
<![endif]-->

http://jfcoder.com/test/funshine.html

Уберите хотя бы это, и все работает отлично.Кроме того, я думаю, что это будет работать нормально, если вы удалите его полностью.