Safari not calculating widths correctly in Jquery script

Just when I thought this script was finally working fabulously. Sigh...

I have two problems which I'm fairly certain are related. First of all, when the page initially loads in Safari the images are in one vertical row, when they should be floating in horizontal rows. This problem vanishes after a thumbnail is clicked.

The second problem is that when a thumbnail is clicked, the content area fails to expand out to its proper width, which is the current width of the content area + 75% of its width again. This problem vanishes when a second thumbnail is clicked. The correct content area expansion behavior is seen in Firefox and IE8.

This problem is occurring on two pages which rely on an expansion script. The relevant pages/scripts are below.

Page 1

<script>
    $(document).ready(function() {
        $('#back').hide();
        $('#full-wrap').hide();
        $('#thumb-wrap a').children().not('img').hide();//hide image captions

        var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div

        $('#thumb-wrap a').click(function(){

            var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
            $('#ajax-content > h1').hide();//hide the page title
            $('#thumb-wrap').hide(); //hide the thumbnails
            $(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
            $('#back').fadeIn(500); //make the back button appear

            $('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
            $('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail

            $('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow');
            $('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by开发者_如何学Python a distance equal to the width of thumb-wrap.

        });

        $('#back').click(function(){
            $(this).fadeOut();//hide the back button
            $('.article').remove();//remove the article div
            $('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
            $('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400);
            $('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
            $('#ajax-content > h1').delay(500).fadeIn(100);//show the page title

        });

     });
</script>

Page 2

$(document).ready(function() {
                            moveIt = $('#content').outerWidth();
                        $('#content').delegate('a', 'click', function(e) {

                            var currl = $('#content').offset();

                            if(currl.left > 300){
                                $('#content').animate({'maxWidth': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');                        
                            }
                            else{
                                $('#content').animate({'maxWidth': '-=' + moveIt / 2 + 'px', 'left' : '43%'}, 400);
                            }
                        e.preventDefault(); //Hyperlink won't load page link.
                        });
    });

Usually Safari's rendering is fine as long as Firefox is happy. What am I missing? Any help would be appreciated. This projects due in about two hours, so I'm down to the wire on troubleshooting.

I think i've been through this kind of issue before, and it has to do with Safari firing the document ready event earlier than other browser.. Your images might not be loaded when your script starts, so calculating width and height won't work. try to use jQuery(window).load() instead of jQuery(document).ready()

see here : http://36flavours.com/2010/01/jquery-document-ready-bug-in-safari-webkit/