Grow your CSS skills. Land your dream job.

Image Placement Woes

  • # February 27, 2009 at 1:59 pm

    Not sure if this should be in the CSS or JS forum so forgive me if it’s in the wrong place.

    I’ve created a "Coda" slider. On this page I’m using images for left and right navigation of the slider. The "left" image sits properly next to the slider. All I had to do was apply a negative "left" property for the width of the image (29px). The "right" image is aligned properly on the X axis but is moved down 500px on the Y.

    I cannot for the life of me figure out what is causing the "right" navigation image to be moved down 500px.
    The height of the slider is exactly 500px so I figure this has something to do with the strange placement. I can position the right image properly with a "top" property of 29px. (Of course that does not fix IE where it has to be 30px)

    Anyone have any idea what may be causing this issue?

    The page can be seen @ : http://jsydnor.com/test
    css @ http://jsydnor.com/test/css/style2.css
    js @ http://jsydnor.com/test/scripts/slider2.js

    **removed the "top" property on the right image so the page displays the problem

    Thanks for any input.

    # February 27, 2009 at 2:45 pm

    Whats up Jerred~

    Try to specify a top position on both of your left/right scroll buttons.

    like:

    Code:
    .scrollButtons.left {
    left: -29px;
    top: 30px;
    }

    .scrollButtons.right {
    right: -29px;
    top: 30px;
    }

    -Soh

    # February 27, 2009 at 3:17 pm

    Soh,

    Interesting. Placing "top" 29px does not move the left image at all.

    Still borked in IE7 by one pixel but I’ll have an easier time fixing that than the 500px mystery.

    Thanks.

    # February 27, 2009 at 3:25 pm

    No problem! Looking much better :-)

    Just keep in mind absolute positioning can do some funky things if your not very specific with its positioning (like leaving the top position out)~

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".