IE vs FF positioning for jQuery Effects

IE vs FF positioning for jQuery Effects

Hello,

I'm creating a landing page with 2 jQuery animations, and I'm running into a number of issues.

1) IE and FF behave differently. The jQuery begins by setting the opacity of .menu to 0. In FF, .menu continues to take up space inf the block-flow of the page. In IE, .menu does not occupy the block-flow (it behaves as it if were absolutely positioned) until the opacity is animated back to 1.

2) The second jQuery animation also has compatibility in issues. I am using the explode animation in reverse on an image. In FF, the animation completes, and then the entire image jumps about 50px up. In IE this does not happen.

Does anyone know what could be causing this?

Here is the site: http://stephenshaheen.com/test2/index.php

Here is the jQuery code:
function home_page_animation(front_image, title, menu){
   var front_image_div = $(front_image);   
   var title_div = $(title);
   var menu_div = $(menu);
   
   menu_div.css({"opacity" : "0"});
   title_div.css({"opacity" : "0", "visibility" : "visible"});
   
   front_image_div.show("explode", {}, 2500);
   title_div.animate({"opacity" : "1"}, 4500,
      function(){
         $(this).animate({ "opacity" : "0"}, 2000, function(){
            $(this).css({"display" : "none"});
            menu_div.css({ "display" : "block", "visibility" : "visible"});
            menu_div.animate({ "opacity" : "1"}, 2000);
         });
      }
   );   
}


here is the css:
#page_cell {
   position: relative;
   margin: 0 auto;
   width: 800px;
   padding: 0;
   text-align: left;
}

#title {
   position: absolute;
   width: 100%;
   top: -10px;
   padding: 0;
   margin: 0;
   font-size: 2em;
   letter-spacing: 25px;
   color: white;
   text-align: center;
   text-transform: uppercase;
   height: 100px;
   visibility: hidden;  /* IE Fix for jQuery*/
}

#title p {
   position: relative;
   left: 14px;
   margin: 0;
   padding: 0;
   text-align: center;
}
.menu {
   margin: 50px 0 0 0;
   height: 30px;
   overflow: hidden;
   text-align: center;
   top: 0;
   visibility: hidden;  /* IE Fix for jQuery*/
}
#content {
   margin: 20px auto;
   color: white;
   padding: 0;
}


and the html:

<body>
<div id="page_cell">
   <div id="title">
      <p>Stephen Shaheen</p>
   </div>
   
   <div class="menu">
      <ul>
<li><a href='index.php'>Home</a></li>

<li><a href='works.php'>Works</a></li>
<li><a href='news.php'>News &amp; Press</a></li>
<li><a href='bio.php'>Biography</a></li>
<li><a href='contact.php'>Contact</a></li>
      </ul>
   </div>
   <div id="content" align="center">
   <img src="images/front.jpg" alt="Front Image" id="front_image" />

   </div>
</div>
</body>


Any help or ideas would be much appreciated! Thank you!