CSS Newbie needs help :-S

[zudo1234]

Hi all,

I’ve got a problem with a site I’ve built. I’ve installed Nivo Slider and used their standard css but there’s a problem with the slider when the page loads, the pictures load underneath each other. Any advice would be amazing :-)

Your text to link here…

Here’s the slider css – thanks in advance!

slider_wrapper {

clear:both;
height:500px;

}

slider {

position:relative;
width:960px;
height:500px;
background: url(../images/loading.gif) no-repeat 50% 50%;

}

slider img {
position:absolute;
top: 0px;
left:0px;
display:none;
}

slider a {
border: 0;
display:block;
}

/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}

/* If an image is wrapped in a link /
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/ The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles /
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; / Safari/Chrome, other WebKit /
-moz-box-sizing: border-box; / Firefox, other Gecko /
box-sizing: border-box; / Opera/IE 8+ /
text-transform:uppercase;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
text-decoration:none;
}
.nivo-caption a:hover {
color:#F00;
}
.nivo-html-caption {
display:none;
}
/ Direction nav styles (e.g. Next & Prev) /
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px;
width:30px;
height: 30px;
display:block;
}
a.nivo-prevNav {
left:10px;
}
a.nivo-nextNav {
right:10px;
background-position:-30px;
}
/ Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav {
text-align:center;
padding: 15px 0;
float:left;
text-indent:-9999px;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}

[MikesBarto2002]

It looks fine to me. What browser are you viewing this on?

[Alen]

Looks fine to me as well.

If images are loading one after another it is most likely JavaScript issue. But it looks like it’s working now. Although there is a 404 error for one JS and CSS file, cookiebar…

[zudo1234]

Hey thanks for the reply Mike.

Chrome and Firefox. When the page loads for a second they stack underneath each other until the images have fully downloaded, then they behave normally (hidden as part of the slider). If your connection is very fast it doesn’t really show. Any advice would be great ;-)

[zudo1234]

Thanks Alen too, here’s a picture of what happens, I’m running jquery-1.10.2.min.js as the main script for the slider. Checking the 404 error on cookiebar, thanks for the heads up ;-)

Your text to link here…

[Author]

Posts