Css issue with easySlider 1.7 javascript

I am still struggling with the slideshow images showing up outside the slideshow area shown on all browsers:

    #slider ul, #slider li,
        #slider2 ul, #slider2 li{
                margin:0;
                padding:0;
                list-style:none;
                }
        #slider2{margin:0;}
        #slider li, #slider2 li{
                /* 
                        define width and height of list item (slide)
                        entire slider area will adjust according to the parameters provided here
                */开发者_Go百科
                width:680px;
                height:500px;
                }
#slider li img{
        float:none;
}

        ol#controls{
                margin:1em 0;
                padding:0;
                height:20px;
                }
        ol#controls li{
                margin:0 10px 0 0;
                padding:0;
                float:left;
                list-style:none;
                height:20px;
                line-height:28px;
                }
        ol#controls li a{
                float:left;
                height:20px;
                line-height:22px;
                border:1px solid #ccc;
                background:#FFF;
                color:#555;
                padding:0 6px;
                text-decoration:none;
                }
        ol#controls li.current a{
                background:#736357;
                color:#fff;
                }
        ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

I only changed the width and height but nothing else. Of course the banner area has slideshow and right buttons. So insight will be appreciated.

any help will be appreciated~!

thanks.

---

for example you have a slider like this:

<div id="myslider">
  <img class="firstSlide" src="../images/img1"/>
  <img src="../images/img2"/>
  <img src="../images/img3"/>
  <img src="../images/img4"/>
</div>

apply your first image with css: .firstSlide { display: block } and hide all other images with #myslider img { display: none; }

hope this helps