Image slider not playing nice with css

Question

I have an image slider that is positioned over a background image but I can't seem to get the image slider to position dead center inside and have the background image not be cut off. Also its got some strange behaviour where the first slide is always further over then the rest!?!?

#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}

#slider ul { padding:25px;}
  #slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none;     }

http://fluroltd.com/clients/harveys/

Answer 1

ah okay, think I see what you mean. Try getting rid of this line:

#slider ul { padding:25px;}

this is increasing the width of your ul and li's by 50px. The other option is to reduce the width declaration to 540px...

EDIT

a third option would be to modify the js you are using. Currently it is using .width() to get the element size. This does not include the padding values. Use .outerWidth() to include the padding in the calculation.

Answer 2

I found the issue earlier in my CSS I had a more generic declaration on the CSS for ul. Made it more specific and viola.