Question

I followed this tutorial in order to create a jQuery Horizontal Accordion.
It works OK, but in IE 7, 8 and 9 two pictures are missing (they are 6) as you can see in the live site:

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

header:

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

(Everything works OK in Chrome and Firefox).

(I’m on linux so I can’t provide the IE output sorry.)

EDIT:

All images appear if the lists <li> tags are 100px of width. I think there is an overflow: hidden issue. But I tried applying width to almost all elements no luck).

Answer 1

It’s this line here:

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

Remove at least that, and it works fine. Also, I think it would work fine if you removed it altogether.