Problem with Image/Content Slider

[Preeminent]

Hey all,
I know that this half has to do with javascript, but I am not sure what is causing my problem. The css or script.
I am trying to use a pretty standard, easy jquery content/image slider into my site.
In my css, I have an image specified as being the slider background and two arrow images for the left and right controls. The problem is that those are not showing up, but the content images do slide in when you blindly search and find the areas that should be the left and right arrows. In other words, you do not see the arrows, but you can find where they should be because the mouse arrow turns into the pointed "link" finger icon when you hover over the area. I hope I explained this good enough. Here is my html:

Code:

Here is my CSS:

Code:

#main {
position:relative;
background: url(“portfoliomainoutline.png”);
height:600px;
width:960px;
overflow:hidden;
}

#content{
position:relative;
background: url(“portfoliomainbg.jpg”) repeat-x;
height:580px;
width:884px;
margin-left:auto;
margin-right:auto;
text-align:center;
top:10px;
overflow:hidden;
}

#slideshow {
margin:0 auto;
width:560px;
height:400px;
background:url:(“sliderbg.jpg”)no-repeat 0 0 ;
position:relative;
top:180px;

}

#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:400px;
overflow:auto; /* allow scrollbar */
position:relative;
}

#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels to avoid horizontal scroll */
height:400px;
}

.control {
display:block;
width:16px;
height:16px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url:(“arrow_left.png”) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url:(“arrow_right.png”) no-repeat 0 0;
}

And here is my script:

Code:

Can anyone see what might be causing this?

[Author]

Posts