Horizontal Accordion text position problem

I am working on a horizontal accordion and the caption text drops below the image when the accordion folds. Oddly enough it works fine in IE, but not in chrome or Firefox. I assume I am just missing something silly in the CSS but I cant seem to pin it down. Thanks

<!DOCTYPE html>

<html>

<head>

<title>Untitled 1</title>

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

/*vertical-align: baseline;*/

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

/* ------------------------------ End Meyer Web Reset ---------------------------------- */

.itinerary_container{

margin-top:45px;

}

#accordion {

list-style: none;

padding: 0;

height: 99px;

overflow: hidden;

background: #7d8d96;

width:960px;

margin:-1px auto 0 auto;

border:thin black solid;

}

#accordion li {

float: left;

display: block;

height: 99px;

width: 119px;

overflow: hidden;

color: #fff;

text-decoration: none;

/*border-left: thin black solid;*/

border-right:thin black solid;

background: #7d8d96;

z-index:50;

}

#accordion li img.thumb {

border: none;

width:79px;

float:left;

margin:20px 20px 20px 20px;

border-radius:7px;

}

li.fixed_width p{

overflow:hidden;

width:150px;

height:99px;

position:relative;

/*margin-top:20px;*/

z-index:0;

margin-left:119px;

background: #7d8d96;

font-size:14px;

z-index:100;

top:20px;

}

li.date_cell {

width:119px;

height:99px;

text-align:center;

margin:0;

padding:0;

}

p.date_number{

margin-top:30px;

}

#accordion li.active {

width: 300px;

height:99px;

background: #7d8d96;

z-index:10;

}

</style>

$(document).ready(function(){

activeItem = $("#accordion li.fixed_width:first");

$(activeItem).addClass('active');

$("#accordion li.fixed_width").click(function(){

$(activeItem).animate({width: "119px"}, {duration:750, queue:false});

$(this).animate({width: "300px"}, {duration:750, queue:false});

activeItem = this;

});

</script>

</head>

<body>

<li class="date_cell">9/21Monday</li>

Section 1 Header