Search code examples
jquerygoogle-chromeslidecut

jQuery slide slicing off the tops of images


For some reason, slide in Chrome and Safari is slicing off the tops of images on one slider on my site and not the other. The code is a bit hairy for each slider, so you can have a look at the problem and the code here: http://explorevictoria.dreamhosters.com/

I have used the same slider twice on the same page, but the functions have their own variables. At one point this smaller slider was working properly, but now after some changes to other parts of the page the top 20 pixels of the images in the bottom slider are getting left behind.

I've tried a couple of dozen things to do with padding and margins around that part of the site, and nothing seems to be fixing it.

I can provide more information about the problem if anything is unclear, but I think it will be obvious when viewing the site.


Solution

  • Change your margin for .slidesmall to margin: 20px auto and it will stop doing it. It seems to be a browser issue, because if you drag the image around or highlight the element inside your dev tool in Chrome after it does the slicing, it will turn normal. Probably has to do with with the browser thinking that the element above is covering the top portion of the div so it doesn't redraw the pixels correctly.