carousel in jquery does not slide correctly in Internet Explorer but does in other browsers.

Question

i created a carousel in jquery that slides an item or set of items up or down.

the demo page i created uses 1 item per page/slide/visible section...

but its not that hard to expand it to 2 or 3...

it has some other features that i embedded, but those are not important for this question.

using the carousel in Internet Explorer 6 or 7 (have not tried 8 yet) it does all the functionality, but it slides less than its supposed to.

i have checked every thing from padding to margins because i know those are usually the problem between browsers. yet still, when you slide down once you will not really see the problem because its only 5 or 10 px off, but if you start sliding a few times it adds up.

can anyone take a look and see if they can find something that i am not noticing?

i cannot add the whole code in this post, but i add a link to the html file and to a zip file containing the whole code including images.

link to the demo: demo link to the source: source zip

Sander

EDIT i as mentioned in the comment below, i modified the code a bit, as Emily suggested i got rid of the margins and even went further, removed all margins and padding between items, fixed imgs to view the difference between items alternatingly having bgcolor changed.

that got me to notice even firefox is off by 5px, yet it does not increment with each page change. while IE6 - 7 add 5 px every page change.

link to the changed version: changed demo

Sander

EDIT after fixed i re-uploaded the zip file, with now also including the working version after the fix from Emily. so anyone who wants to use the script feel free to get it from the link above...

Answer 1

It's the double vertical margin bug in ie. Since you are using absolute positioning, just set top:16px instead of bumping it down with the margin.

.FotoCarousel .wrapper {
  height:100px;
  position:absolute;
  top:16px;
  width:159px;
}

---

edit after comment

Change

.FotoCarousel ul li a img {
  display:block;
}

to

.FotoCarousel ul li a img {
  vertical-align:bottom;
}

Having a block level element (the img) inside a inline level element (the a) is inconsistantly rendered between browsers. Also IE6/7 will leave space for descenders even if you do have only an image and no text. The vertical-align:bottom removes that space.