...

View Full Version : CSS Slideshow, All slides after the first move down



avneet
04-30-2011, 06:38 PM
Hi Guys,

I am having issues with a slide show. Someone else had created this and than left the company. All the slides after the first slide drop down about half an inch (bottom inch disappears). The first slide is perfectly fine, it's just every slide after that moves. I have attached the CSS file for the slide show. I can't figure out what to do. Thanks for any help.


/* Slides */
.slides {
float:left;
height:300px;
margin-top:-41px;
margin-left:0px;
margin-bottom:10px;
overflow:hidden;
position:relative;
width:640px;
}

#slideshow1 .slides {
height: 300px;
}

#noob3,
.noob {position:absolute;}
.noob div {
float:left;
height:280px;
width:640px;
}

#noob3 div {
float:left;
height:230px;
width:300px;
}
#slideshow2 {
background: url('../images/box-1.png') no-repeat;
float:left;
overflow:hidden;
}
#slideshow2 p {
background: url('../images/box-bg.png');
margin-top:0px;
padding:0 20px;
font-size:12px;
line-height:23px;
}
#slideshow2 h2 {
font-size:15px;
font-weight:bold;
padding:7px 0 10px 20px;
text-shadow:#fff 1px 1px 0;

}

#slideshow2 ul {
background: url('../images/box-bg.png');
margin-top:0px;
padding:0 20px;
font-size:12px;
line-height:23px;
}

#slideshow2 li {
background: url('../images/bullet-orange.png') no-repeat left 8px;
display:block;
padding-left: 2em;
}





#slideshow2 .more {
background: url('../images/box-1.png') no-repeat left bottom;
margin-top:0px;
padding:15px 30px 5px 30px;
text-align:right;
line-height:1em;
font-size:.95em;

}

#slideshow4 {
background: url('../images/box-1.png') no-repeat;
float:left;
overflow:hidden;
}
#slideshow4 p {
background: url('../images/box-bg.png');
margin-top:0px;
padding:0 20px;
font-size:12px;
line-height:23px;
}
#slideshow4 h2 {
font-size:15px;
font-weight:bold;
padding:7px 0 10px 20px;
text-shadow:#fff 1px 1px 0;
}
#slideshow4 .more {
background: url('../images/box-1.png') no-repeat left bottom;
margin-top:0px;
padding:15px 30px 5px 30px;
text-align:right;
line-height:1em;
font-size:.95em;
}

#slideshow4 ul {
background: url('../images/box-bg.png');
margin-top:0px;
padding:0 20px;
font-size:12px;
line-height:23px;
}

#slideshow4 li {
background: url('../images/bullet-orange.png') no-repeat left 8px;
display:block;
padding-left: 2em;
}



#movies {
background:url(../images/box.png);
margin-left:10px;
float:left;
height:230px;
width:300px;
margin-top:-3px;
position:relative;
overflow:hidden
}
#movies a.browse {
margin:100px 0 0 0;
}
#movies a.right {float:right;}

#movies a.movie {
display:block;
position:relative;
height:230px;
width:300px;
text-decoration:none;
}
#movies a.movie h2 {
font-size:1.4em;
}
#movies .desc {
background:url(../images/videoframe.gif);
bottom:0;
color:#111;
left:0;
position:absolute;
right:0;
padding:30px;
top:0;
z-index:20;
}

#movies .desc .inner {
background:url(../images/transwhite.png);
bottom:10px;
color:#111;
display:block;
left:10px;
position:absolute;
right:10px;
padding:10px 25px 25px 25px;
}

.noob h2 {
color:#675b52;
font-size:24px;
font-weight:bold;
margin:55px 0 10px 10px;
text-shadow:#fff 1px 1px 0;
}
#noob62 p {
color:#171717;
font-size:15px;
line-height:30px;
margin-left:10px;
text-shadow:#fff 1px 1px 0;
width:370px;
}

#noob63 p {
color:#171717;
font-size:12px;
line-height:25px;
margin-left:10px;
text-shadow:1px 1px 0 #FFFFFF;
}

#noob63 .slide2 p {
font-size:15px;
line-height:30px;
margin-left:10px;
color:#171717;
text-shadow:#fff 1px 1px 0;
width: 590px;
}

#noob63 .slide2 ul{
font-size:12px;
line-height:20px;
margin-left:40px;
text-shadow:1px 1px 0 #FFFFFF;
}


#slideshow1 .slide1 {
margin-top:-20px;
background-repeat:no-repeat;
background-attachment:scroll;
background-position:right 24px /*500px 120px*/;
}

.tabs {
clear:both;
margin-top:-10px;
position:relative;
z-index:20;
}
.tabs span {
cursor:pointer;
width:8px;
height:8px;
float:left;
margin:3px;
background:url('../images/navigator.png') 0 0 no-repeat;
display:block;
font-size:1px;
}
.tabs span.active {
background-position:0 -16px;
}

#slideshow2 .tabs {
top: 299px;
left:300px;
}

/* Scrollable. */
div.scroll {overflow:hidden;clear:both;width:100%;padding:10px 0 10px 0;}
div.scrollable {
float:left;
position:relative;
overflow:hidden;
width: 860px;
height:70px;
}
div.scrollable div.items {
position:absolute;
}
div.scrollable div.items div {
float:left;
}
div.scrollable div.items div span {
display:block;
float:left;
height:70px;
padding:0 7px;
width:92px;
}
div.scrollable img {
opacity: 0.5;
-moz-opacity:.50;
filter:alpha(opacity=50);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
div.scrollable img:hover {
opacity: 1;
-moz-opacity:1;
filter:alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
a.browse {
background:url('../images/hori_large.png') no-repeat;
display:block;
width:30px;
height:30px;
float:left;
margin:20px 10px;
position:relative;
cursor:pointer;
font-size:1px;
z-index:20;
}
a.right { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }
a.left { margin-left: 0px; }
a.left:hover { background-position:-30px 0; }
a.left:active { background-position:-60px 0; }

Celtboy
04-30-2011, 08:41 PM
There's probably some javascript associated with this as well. Would you mind posting that so I can get a more complete picture of what's going on? (The appropriate html would be good too)....or just a link to the page! :)

-Celt



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum