jQuery localScroll only working in IE7

Question

I have the following jQuery code that uses the scrollTo and localScroll plugins from Ariel Flesler :

$(document).ready(function(){

    $('#navigation').localScroll({
        target: '#scrollpane',
        queue: true,
        duration: 1500
    });

});

I have the following CSS:

#scrollpane {
height: 400px;
width: 950px;
overflow: hidden;
}

And the following markup:

    <ul id="navigation">
        <li>
            <a href="#smallgallery" title="Small Studio">Small<br/><span>SMALL STUDIOS</span></a>
        </li>
        <li>
            <a href="#mediumgallery" title="Medium Studio">Medium<br/><span>MEDIUM STUDIOS</span></a>
        </li>
        <li>
            <a href="#largegallery" title="Large Studio">Large<br/><span>LARGE STUDIOS</span></a>
        </li>
    </ul>

<div id="scrollpane">
    <div id="smallgallery">
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
    </div>

    <div id="mediumgallery">
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
    </div>

    <div id="largegallery">
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
        <img class="img" src="/content/img/gallery-holder.jpg" width="946" height="398" alt="Gallery Image" />
    </div>
</div>

It works fine in IE7 only and doesnt work in any other browsers including FF, IE8 and Chrome etc!? all it does is move a couple of PX and stops

Anyone seen this before or have any ideas how to fix it?

Thanks in advance

Answer 1

try making overflow: hidden; and change it to overflow: auto;