Hi :-)

I created a slide system on my website but I have a problem.

By default I put a div to left: -150% to hide it and a overflow-x: hidden.

Click on the 'image button' on the right hand corner to see : http://jsfiddle.net/Xroad/XrK4Z/1/

Unfortunately, despite of the overflow-x:hidden the horizontal scrollbar appears on safari.

How to fix it ?

Perhaps a system with a 'display:hidden' for the next div would avoid the problem. But how to do that ? Thank you.

html,body { overflow-x: hidden; }


#page { overflow-x: hidden; } $('#btn-clients').click(function () { $("#main ul:first").animate({ left: '-150%' }, 500, function () { $(this).css('left', '150%'); $(this).appendTo('#main'); }); if ($('#main ul:first').is('#content-scene')) { $('#content-scene').next().animate({ left: '0' }, 500); } if ($('#main ul:first').is('#content-clients')) { $('#content-clients').next().animate({ left: '150' }, 500); } });