nivo slider overflow issue
I am using nivoslider for my webpage. The images look overflow one by one until the page loading fully. Here is the css i'm using. I have tried `overflow:hidden` property. But it didn't get corrected. How can i correct that? 

    .nivoSlider {
    	position:relative;
    }
    .nivoSlider img {
    	position:absolute;
    	top:0px; overflow:hidden;
    	left:0px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:500px;
    	height:100%;
    	border:0;
    	padding:0;
    	margin:0;
    	z-index:60;
    	display:none;
    }
    /* The slices in the Slider */
    .nivo-slice {
    	display:block;
    	position:absolute;
    	z-index:50;
    	height:100%;
    }
    /* Caption styles */
    .nivo-caption {
    	position:absolute;
    	left:0px;
    	bottom:0px;
    	background:#000;
    	color:#fff;
    	/*opacity:0.8;  Overridden by captionOpacity setting */
    	width:100%;
    	z-index:89;
    }
    .nivo-caption p {
    	padding:5px;
    	margin:0;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    	position:absolute;
    	top:45%;
    	z-index:99;
    	cursor:pointer;
    }
    .nivo-prevNav {
    	left:0px;
    }
    .nivo-nextNav {
    	right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav a {
    	position:relative;
    	z-index:99;
    	cursor:pointer;
    }
    .nivo-controlNav a.active {
    	font-weight:bold;
    }

Here is the html code

    <div id="slider">
    
    			  
    			   <img src="uploads/images/6431-45-york-st-kitchen-b.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/9931-45-york-st-front-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/8931-45-york-st-bed-1a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/3931-45-york-st-bath-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/4031-45-york-st-study-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/7531-45-york-st-kitchen-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/1931-45-york-st-living-b.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/5531-45-york-st-foyer-a.jpg" width="315" height="250" alt="" />
    
    				   
    			   
    			   </div>
nivo slider overflow issue
===

I am using nivoslider for my webpage. The images look overflow one by one until the page loading fully. Here is the css i'm using. I have tried `overflow:hidden` property. But it didn't get corrected. How can i correct that? 

    .nivoSlider {
    	position:relative;
    }
    .nivoSlider img {
    	position:absolute;
    	top:0px; overflow:hidden;
    	left:0px;
    }
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    	position:absolute;
    	top:0px;
    	left:0px;
    	width:500px;
    	height:100%;
    	border:0;
    	padding:0;
    	margin:0;
    	z-index:60;
    	display:none;
    }
    /* The slices in the Slider */
    .nivo-slice {
    	display:block;
    	position:absolute;
    	z-index:50;
    	height:100%;
    }
    /* Caption styles */
    .nivo-caption {
    	position:absolute;
    	left:0px;
    	bottom:0px;
    	background:#000;
    	color:#fff;
    	/*opacity:0.8;  Overridden by captionOpacity setting */
    	width:100%;
    	z-index:89;
    }
    .nivo-caption p {
    	padding:5px;
    	margin:0;
    }
    /* Direction nav styles (e.g. Next & Prev) */
    .nivo-directionNav a {
    	position:absolute;
    	top:45%;
    	z-index:99;
    	cursor:pointer;
    }
    .nivo-prevNav {
    	left:0px;
    }
    .nivo-nextNav {
    	right:0px;
    }
    /* Control nav styles (e.g. 1,2,3...) */
    .nivo-controlNav a {
    	position:relative;
    	z-index:99;
    	cursor:pointer;
    }
    .nivo-controlNav a.active {
    	font-weight:bold;
    }

Here is the html code

    <div id="slider">
    
    			  
    			   <img src="uploads/images/6431-45-york-st-kitchen-b.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/9931-45-york-st-front-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/8931-45-york-st-bed-1a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/3931-45-york-st-bath-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/4031-45-york-st-study-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/7531-45-york-st-kitchen-a.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/1931-45-york-st-living-b.jpg" width="315" height="250" alt="" />
    
    			  
    			   <img src="uploads/images/5531-45-york-st-foyer-a.jpg" width="315" height="250" alt="" />
    
    				   
    			   
    			   </div>