jQuery EasySlider 1.7 glitch in IE 8

I have an EasySlider slideshow on the homepage of my website that works well in Firefox and Chrome, but not in IE. The problem I specifically need help with occurs in IE7 and IE8.

If you click the previous arrow to go from the first slide to the last, the image in the last slide starts out on the left side then jumps to the right side where it belongs. When transitioning from the last slide to the first slide, the same thing happens with the image on the first slide. This problem only occurs on these two slides, and only only when going backwards from first slide to last slide (glitch on the last slide), and forward from last slide to first slide (glitch on the first slide).

HTML

<div id="slider">
    <ul>
        <li>
            <article id="architectural-illustration">
                <div class="slider-text">
                    <h1>A Fresh Look @ Architecture</h1>
                    <p>With over 10 years of architectural design experience we are able to create beautifully rendered 3D models and plans for almost any size or type of project using the latest in CAD technology. Let us help bring your projects to life!</p>
                    <p>seeing is believing: <a href="#">Drawing Board</a></p>
                </div>
                <div class="architectural-illustration-image">
                    <img alt="3D model of residential floorplan" src="images/drafting-3d-models-scroller.png" width="469" height="350" />
                 </div>
            </article>
        </li>
        <li>
            <article id="web-design">
                <div class="slider-text">
                    <h1>High Flying Web Designs</h1>
                    <p>No "cookie cutter" designs here! We believe that each client has its own story to tell. Our designs come from working closely with you. Give your site the look and feel needed to tell who you are.</p>
                    <p>preflight check: <a href="#">See Our Work</a></p>
                </div>
                <div class="web-design-image">
                    <img alt="binary code flag" src="images/web-designs-scroller.jpg" width="395" height="320" />
                </div>
            </article>
        </li>
        <li>
            <article id="3d-illustration">
                <div class="slider-text">
                    <h1>Product Illustration</h1>
                    <p>Whether your product is existing or a new idea, we can bring it to life. From still frames to full blown 3D animations, get the right tools to market your product.</p>
                    <p>sneak a peak: <a href="#">Examples</a></p>
                </div>
                <div class="model-image">
                    <img alt="3d illustration of shoring product" src="images/3d-product-illustration-scroller.png" width="397" height="315" /> 
                </div>
            </article>
        </li>
        <li>
            <article id="mobile-web">
                <div class="slider-text">
                    <h1>Make it mobile.</h1>
                    <p>Because websites are typically optimized for desktop usability, they don't follow the guidelines necessary for usable mobile access. "Bah Humbug!" With the mobile world advancing each and every day, we have solutions to make sure your web site goes everywhere you do.</p>
                    <p>learn more: <a href="#">Free Consultation</a></p>
                </div>
                <div class="mobile-web-image">
                    <img alt="mobile phone showing optimized website" src="images/mobile-website-solutions-scroller.jpg" width="401" height="353" />
                </div>
            </article>
        </li>
    </ul>开发者_如何学C;
</div> <!-- end #slider div -->  

jQuery

<script type="text/javascript">
$(document).ready(function() {
                           $("#slider").easySlider({
                                                   auto: true,
                                                   continuous: true
                                                   });
                           });
</script>  

CSS

#slider ul, #slider li {
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li {
margin-bottom:20px;
background-color:#fff;
width:960px;
height:375px;
overflow:hidden;
}
#slider article{
width:960px;
height:375px;
}
#slider article p {
margin-top:20px;
}
#slider article div.slider-text {
width: 470px;
margin:20px;
margin-right:0px;
float:left;
}
#slider article div.architectural-illustration-image,
#slider article div.web-design-image,
#slider article div.model-image,
#slider article div.mobile-web-image {
width:470px;
float:right;
overflow:hidden;
}
#slider article div.architectural-illustration-image {
margin-right:0px;
margin-top:25px;
width:462px;
height:337px;
}
#slider article div.web-design-image {
margin-right: 20px;
margin-top:55px;
height:320px;
width:395px;
}
#slider article div.model-image {
margin-right:50px;
margin-top:25px;
height:315px;
width:397px;
}
#slider article div.mobile-web-image {
margin-right:0px;
margin-top:22px;
width:401px;
height:353px;
}  

Any help would be greatly appreciated. Thanks!

This solved a positioning problem I was having, not sure if it will work for this specific bug but worth a shot. As simple as #slider { position: relative; } found here