Question

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?

CSS :

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

HTML :

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

Answer 1

Specify a height for #slider and add the overflow:hidden to it

This will perfectly fix it