jQuery slide div from bottom going wrong in Google Chrome

Question

I have written my own image slider in jQuery that slides up a caption div from the bottom of the image.

Please see the demo on the following link: http://beta.marhaba.co.nz/about

When viewing this page in Google Chrome, you will notice how the caption div does not appear from the bottom of the image, but from below the image. To best understand what I am describing please see the link I have posted.

How do I fix this behaviour? Please note that the caption div has a height: auto.

I currently animate the caption div as follows:

$('.caption-container', $(this)).effect('slide', {direction: 'down'}, 'fast');

Answer 1

I'm pretty sure that the issue here is your CSS, not your JavaScript. Could you try setting the following CSS?

div#barak ul.pictures {
    overflow:hidden;
}

I think that will stop the caption from showing below the slideshow.