I am developing an annual report site which needs to be compatible with major browsers such as IE, FF and Safari at least. I have a couple of issues with the jquery effect.
I have added a jquery slide reveal effect to the page which partially shows the main content div for a couple of seconds then it animates to reveal the rest of the content. I have tested it on IE6, IE7 and FF 3 on WinXP and it works fine. Also it works on the MAC in FF3.
However the page has a serious issue in Safari 4.04 on MAC: the entire animated div content shifts to the far right about as much as the original width of the content. I have also noticed that if I removed the "overflow" related css code then the div would display in correct position initially but of course the jquery slide effect will not work properly because initially it needs to hide content using "overflow". Also the div would shift again as the jquery animation would start.
Here is the link: http://www.attilareinhardt.com/clients/test/mainWhoWeAre_slide2.html
Is there any workaround or solution for this problem?
The other minor issue is that the animated slide effect in some cases doesn't open and reveal the content all the way through. The bottom part gets clipped and cropped sometimes too early and it happens on all browsers but not all the time. I guess it has a problem properly calculating the correct height of the content div. Is there any way to enforce correct height calculation?
When I add clear:left; to the style of your id="mainContent" element, it corrects it.