Help needed urgently with Safari Issue

Help needed urgently with Safari Issue

Hi guys, I am new to this site and fairly new to Jquery. I am need of urgent help here or my backside is on the line. I have tried seaching for an answer on this and cant seem to find one.

I have just started a new job and am building my first website for them. Im using Jquery to try and impress them but after trying and testing the site in Safari, I am stumped as to why such a basic function its going wrong. The script works fine in ie and firefox so Im pulling my hair out. I have stripped all the non necessary code out of this and placed the css and javascript inside the head.

<html>
    <head>

        <style type="text/css">
            html {
            font-size:16px;
            margin:0;
            padding:0
            }
            body,div,p {
            margin:0;
            padding:0;
            background: #eee;
            }

            div#container {
            width:70.06em;
            height:20em;
            overflow: visible;
            background:#fff
            }

            div#blackContainer {
            height:20em;
            background:#000
            }

            div#portfolio {
            display:none;
            width:51.75em;
            height:20em;
            background:#fc0;
            }

            div#blackPanel {
            width:51.75em;
            height:20em;
            background:#000
            }

            div#whitePanel {
            padding-left:4.19em;
            height:20em;
            background:#fff
            }

            .panel {
            float:left
            }

         
        </style>



        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script>

            $(document).ready(function(){
            // All Jquery fucntions should reside in here


                // NEW FUNCTION SHOW PORTFOLIO TAB
                $(".showPortfolio").click(function () {
                  // $("#whitePanel").fadeOut("slow");
                   $("#container").css({'width' : '103.5em', 'overflow' : 'hidden'});
                   $("#portfolio").show(1000);
                });

                // NEW FUNCTION HIDE PORTFOLIO TAB
                $(".hidePortfolio").click(function () {
                   //$("#whitePanel").fadeIn("slow");
                   $("#portfolio").hide(1000, function(){$("#container").css({'width' : '70.06em', 'overflow' : 'visible'});});
                });

            // End Doc Ready
            });
        </script>


    </head>
    <body>
        <div id="container">
           
           
            <div id="blackContainer" class="panel">
               
                <div id="portfolio" class="panel" style=""><a class="hidePortfolio" href="#">Hide Portfolio Tab</a></div>
                <div id="blackPanel" class="panel" style=""><a class="showPortfolio" href="#">Show Portfolio Tab</a></div>
               
               
            </div>

            <!-- WHITE PANEL -->
            <div id="whitePanel" class="panel showPages" style="">White Panel</div>
            <!-- END WHITE PANEL-->

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


If you load that code in firefox you will see that by clicking on 'show porfolio', a yellow div slides open and pushes the black div to the right. You click 'hide portfolio' and the black div slides back and the yellow div hides. You can open and close the portfolio div as often as you like and it works a treat.

If you try doing the same in safari, it works the first time but then it starts pushing the black div down. I cant for the life of me think what it could be and I have spent ages on it. If one of you kind experts on here could have a quick look at it for me I would more grateful than you can imagine!

Thanks in advance, Maffo