Firefox Animate Problem

Firefox Animate Problem

Hello All,

New to jQuery. Anyone out there know why the below code would not be working properly in Firefox? I have a right sidebar with a partially transparent background and I want it to stretch to be the height of the browser. Also, he sidebar slides into the page after 1 second. Everything is working perfectly on Safari and Chrome, but Firefox does not stretch the item to the height of the window, rather it is only also tall as its contents, and it also does not complete any slide animation, just waits a second and then the sidebar appears.

Thanks!

--------------------

 $(document).ready(function() {
     //set right sidebar height and adjust when window resizes
    $("#right").height(document.height);
    $("#main").height(document.height);
   
    $(window).resize(function(){
        $("#right").height(document.height);
        $("#main").height(document.height);
    });
   
    //animate the right sidebar & main content when the page loads
    $("#right").width("0px");
    setTimeout(function(){
        $("#right").animate({
            width:"300px"
        }, 1000, function(){
            $("#right-text").fadeIn("slow", function(){
                $("#right-text a").click(function(){
                    $("#main").animate({
                        width:"900px"
                    }, 1000);
                });
            });
        });
    }, 1000);
 });