Jquery coda-slide problem

[mastubbs]

Hey guys have a questions about coda-slider (http://plugins.jquery.com/project/Coda-Slider)

For some reason my 'slide left' button can only be clicked right on the left edge. The rest of the button is just an image and does not get the pointer on mouseover or cause slide left when clicked. I really cant figure out why. If anyone can help id be really greatful.

Thanks

Heres the code:
css:
#centeredcontent {
width: 990px;
height: 550px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
margin-left: -500px;
/* Half the width of the DIV tag which is 50 pixels */
margin-top: -253px;
/* Half the height of the DIV tag which is also 50 pixels */
}

body {
margin: 0px 0px 0px 0px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

html, body {
height: 100%;
}

#wrapper {
width: 1000px;
margin: 0 auto;
}

#intro {
padding-bottom: 10px;
}

h2 {
margin: 0;
margin-bottom: 14px;
padding: 0;
}

#slider {
width: 990px;
margin: 0 auto;
position: relative;
}

.scroll {
height: 455px;
width: 990px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
}

.scrollContainer div.panel {
padding-left: 100px;
height: 550px;
width: 990px;
}

#shade {
height: 50px;
}

ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 9px;
}

ul.navigation li {
display: inline;
margin-right: 10px;
}

ul.navigation a {
padding: 10px;
color: #FF00FF;
text-decoration: none;
}

ul.navigation a:hover {
color: #FFFFFF;
}

ul.navigation a.selected {
color: #FFFFFF;
}

ul.navigation a:focus {
outline: none;
}

.scrollButtons {
position: absolute;
top: 150px;
cursor: pointer;
}

.scrollButtons.left {
left: -20px;
}

.scrollButtons.right {
right: -20px;
}

.hide {
display: none;
}


javascript

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider .scrollContainer > div');
var $container = $('#slider .scrollContainer');

// if false, we'll float all the panels left and fix the width
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
$panels.css({
'float' : 'left',
'position' : 'relative' // IE fix to ensure overflow is hidden
});

// calculate a new width for the container (so it holds all panels)
$container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll = $('#slider .scroll').css('overflow', 'hidden');

// apply our left + right buttons
$scroll
.before('<img class="scrollButtons left" src="images/scroll_left.png" />')
.after('<img class="scrollButtons right" src="images/scroll_right.png" />');

// handle nav selection
function selectNav() {
$(this)
.parents('ul:first')
.find('a')
.removeClass('selected')
.end()
.end()
.addClass('selected');
}

$('#slider .navigation').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
selectNav.call(el);
}

if (window.location.hash) {
trigger({ id : window.location.hash.substr(1) });
} else {
$('ul.navigation a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset. Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ?
$container.css('paddingTop') :
$container.css('paddingLeft'))
|| 0) * -1;


var scrollOptions = {
target: $scroll, // the element that has the overflow

// can be a selector which will be relative to the target
items: $panels,

navigation: '.navigation a',

// selectors are NOT relative to document, i.e. make sure they're unique
prev: 'img.left',
next: 'img.right',

// allow the scroll effect to run both directions
axis: 'xy',

onAfter: trigger, // our final callback

offset: offset,

// duration of the sliding effect
duration: 500,

// easing - can be used with the easing plugin:
// http://gsgd.co.uk/sandbox/jquery/easing/
easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it
// supports// the indexed next and previous scroll along with hooking
// in to our navigation.
$('#slider').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position,
// setting the duration to 1 because I don't want it to scroll in the
// very first page load. We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});


Thanks again

Matt

[Fumigator]

There is probably another div overlaying it. Use the Firefox plugin Web Developer and turn on "outline current element" to see if this is the case.

[mastubbs]

hey yep u were right thanks. oddly it appears that there is a div overlapping both the left and right scroll buttons but only the left one isnt working, im guessing coz the right div is 'on top', and the left one is 'underneath' this div? is there some way to move the left one on top also?

thanks for ur help