horizontal accordion not working in Safari or Chrome

I'm sure I'm missing something obvious here, as I'm 开发者_开发技巧relatively new to jQuery.I'm trying to build a horizontal accordion. So far, it works fine in FF but not in Safari or Chrome.

In Safari and Chrome, the .content divs appear beneath their respective accordion panes rather than retaining their position and exhibiting the width animation.

Thanks in advance for any help.

Here's a link to the example: http://www.billjordandesign.com/jQuery_tests/horizontal_accordion.html

Here's my jQuery:

<script type="text/javascript">
$(document).ready(function() {

$('.content').hide();
$('.content:first').show(); 


$('a').click(function(){

 $('.content').hide();
 $(this).siblings('.content').animate({'width':'toggle'}, 'slow', 'easeOutBack')
  });

});

</script>

...here's my HTML:

<div id="navigation">

<ul>

<li><a href="#"><span><div class="pane"><div class="verticaltext">Home</div></div></span></a><div class="content">1</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">About</div></div></span></a><div class="content">2</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Overview</div></div></span></a><div class="content">3</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Services</div></div></span></a><div class="content">4</div></li>


<li><a href="#"><span>
<div class="pane"><div class="verticaltext">Contact</div></div></span></a><div class="content">5</div></li>

</ul>

</div>

...here's my CSS:

#navigation{
 position:absolute;
 display:block;
 top:100px;
 width:1000px;
 height:400px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 color:#333;

}

#navigation a{
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight:bold;
 color:#FFF;

}

#navigation a:hover{
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 font-weight:bold;
 color:#FFF;


}


#navigation ul{
 margin:0;
 padding:0;
 height:400px;
 list-style-type:none;
 list-style-image:none;
}

#navigation li{
 display:inline;
 border-right:thin #FFF solid;
 float:left;

}

.pane{
 position:relative;
 display:block;
 height:400px;
 width:50px;
 background-color:#09F;
 float:left;
}

.verticaltext {
 position:absolute;
 display:block;
 width:50px;
 bottom:50px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:24px;
 font-weight:bold;
 color:#FFF;
 text-align:center;
 letter-spacing:-1px;
 -webkit-transform: rotate(-90deg); 
 -moz-transform: rotate(-90deg);
}

.content{
 position:relative;
 display:block;
 width:400px;
 height:400px;
 left:10px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#333;
 float:left;
 background-color:#FFF
}

the jquery looks solid, I made some html and css tweaks. It's working for me in chrome

http://jsfiddle.net/generalhenry/D3Hm5/1/