treehouse : what would you like to learn today?
Web Design Web Development iOS Development

jQuery slide not staying in it's container

  • Can view the slider at http://dev.rjmccollam.com/wordpress

    When you click on an arrow to rotate through the images the incoming images overlap the slider bg. How do I keep the rotating images within the border?

    This is the CSS:

    #slider {background: url(images/slider-bg.jpg) no-repeat; height: 379px; overflow:hidden;}
    #slider ul {list-style:none; width: 939px; height: 332px;}
    #slider li {overflow:hidden; display: inline; width: 939px; height: 332px; margin: 11px 11px 0 10px;}
    span#prevBtn{width: 60px; height: 100px; position: absolute; margin: -250px 0 0 10px;}
    span#nextBtn{width: 60px; height: 100px; position: absolute; margin: -250px 0 0 889px;}

    I have tried tweaking and tweaking and can't seem to figure it out. Thanks for your help!
  • Please state which specific browser you are having the problem with. I imagine it's IE, but to get help quicker it is best to give as much information as possible.
  • It's not browser specific. If you follow the link and you change an image whether to the right or left the image will overlap the border image that is being used.