The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Anything Slider Image shifted.

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #31880

    I have a very strange problem which I don’t really understand. Originally I tried changing a bunch of the coding but I found it gave me a weird problem, so I cut back my changes completely until I had just copied the entire slider.css file and the .html file except I removed the slides with text in it. How ever everytime I look at it the images are shifted 40 pixels to the right, first I thought it was a problem with the left and right arrows but it happens if I have them there or if i remove them. I removed all the other css coding on the page and it happens, I copied my entire style.css file from my website into the original slider.css and it doesn’t happen. I can’t make it happen on the downloaded original index.html&slider.css and I can’t make it not happen on my own index.html&style.css…

    Any ideas? I have to assume I’m doing something stupid but I can’t for the life of me figure out what it is…

    Including an example image of what I’m talking about and the code being used…

    Image of the problem

    CSS Code


    Style.css Code

    .anythingSlider                         { width: 760px; height: 360px; position: relative; margin: 0 auto 15px; }
    .anythingSlider .wrapper { width: 680px; overflow: auto; height: 324px; margin: 0 40px; position: absolute; top: 0; left: 0; }

    /* Width below is max for Opera */
    .anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
    .anythingSlider .wrapper ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
    .anythingSlider .arrow { display: none; height: 200px; width: 67px; background: url(../Images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: -250px; cursor: pointer; }
    .anythingSlider .forward { background-position: 0 0; right: -20px; }
    .anythingSlider .back { background-position: -67px 0; left: -20px; }
    .anythingSlider .forward:hover { background-position: 0 -200px; }
    .anythingSlider .back:hover { background-position: -67px -200px; }

    .thumbNav { position: relative; top: 323px; text-align: center; }
    .thumbNav li { display: inline; }
    .thumbNav a { color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(../images/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
    .thumbNav a:hover { background-image: none; }
    .thumbNav a.cur { background: #e0a213; }

    .start-stop { z-index: 10; background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
    .start-stop.playing { background-color: red; }
    .start-stop:hover { background-image: none; }

    .anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
    .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }
Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.