Image Placement Woes

[jerred]

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.

[Soh Tanaka]

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

[jerred]

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.

[Soh Tanaka]

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)~

[Author]

Posts