Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Slideshow, All slides after the first move down

    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.

    Code:
    /* 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; }

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Virginia, USA
    Posts
    620
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •