Hi all, I have been trying to install a jQuery Easy Slider 1.7 on my site and I am running into a CSS problem.

I have been following a tutorial from http://www.kerrinhardy.com/2011/02/1...7-in-zen-cart/
and seem to have everything working ok, until I have to edit the stylesheet.css. As my template is heavily modified adding the step 4 to the stylesheet interferes with my design and I seem to lose most of the header and my banner, however the image slider is displayed with the buttons correctly. If I leave step 4 out, the slider displays but the buttons do not show up and are only links below the slider.

** screenshot removed by request **

The website is a u s t r a l i a n e c o p r i n t .com.au and at the moment I have left the css in and the slider appears how I want it to but again I loose my header etc.

If some one out there can help, who knows whats wrong with the script and can see how to modify the stylesheet.css without messing up my template I would be greatly appreciative. Thanks in advance.

This is the css to add from step 4 of the tutorial:

/* // Easy Slider */

img{border:none;}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#container{
margin:2em auto;
position:relative;
text-align:left;
width:660px;
background:#fff;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:660px;
height:240px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:660px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */