Today is the first day that I’ve done a website using javascript and css with html and I have a headache after 10hrs. I finally got the slideshow working on the home/index page but I can’t seem to get the same slideshow on my previews.html page and I’m guessing I’m going to run into the same problem on a couple other pages that I need to get this slideshow on. Can someone look at this code and tell me what I’m doing wrong? Here is the link to the preview page of my website http://www.theauthoryani.com/previews.html Obviously it’s not supposed to look like that. Below is the css code
/* Index CSS*/
#main_container{ position:relative;
float:left; width:975px;
height:140px;
padding:0 0 40px;}
#container {position: relative;
width: 975px;
border:0px;
float: left;
z-index: 0;}
#slides {position: absolute; z-index: 100;}
.slides_container { width: 975px; overflow: hidden; position: relative; display:none;}
.slides_container div.slide {width:975px; height:447px; display:block;}
/* Previews CSS*/
#previews{width:732px; background-image:url(http://www.theauthoryani.com/bg1.jpg);
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;
padding-bottom:93px;};
position:relative; float: right; top:55px; font-family:'AdobeGaramondPro-Bold'; font-size:16px;
letter-spacing:1px;
text-align:justify;
line-height:1.5;
padding-bottom:15px;
padding-right:2px;
margin-bottom:100px;}
#main_container{ position:relative; float:left; width:975px; height:140px; padding:0 0 40px;}
#container {position: relative;
width: 975px; border:0px;
float: left;
z-index: 0;}
#slides {position: absolute; z-index: 100;}
.slides_container { width: 975px; overflow: hidden; position: relative; display:none;}
.slides_container div.slide {width:975px; height:447px; display:block;}