I am in the process of revamping our company website and incorporating a lot of effects using jQuery, Flash, and more. While I haven't encountered any major issues so far, there are two minor problems that keep popping up. Since I have received great help from this community before, I thought I'd ask for assistance again:
The page I am working on: (URL removed)
First Problem
When you click on the green arrow in the top navigation under "Results", a menu is supposed to slide out from right to left. It works perfectly in Firefox, but in IE and Safari, the animation starts in the middle of the page before shifting back to its correct position. Additionally, when you try to close the menu (using the similarly colored arrow), it closes smoothly in Firefox but reappears after the transition. In IE and Safari, the menu disappears but the animation starts in the wrong spot.
Second Minor Issue
If we can resolve the sliding menu problem, I would like to implement a similar effect for the bottom "buckets" as well. These buckets currently slide up and down when you click on the gray arrow box below them. I have been experimenting with the .animate function in jQuery to increase the height first and then apply a negative margin, like this:
$('#footer-bucket1')
.animate({ height: '392px' }, 300)
.animate({ marginTop: '-306px'}, 300)
.addClass('bucket-open');
However, when I tried to apply a slide-up transition to it, the box expanded downward off the page (which has overflow: hidden applied). Is there a way to make the box actually slide up to reveal the content, similar to its current behavior? Thank you for your help!