jQuery .slideToggle does not change size of containing div

I have a simple .slideToggle on my category headings on the website: http://www.UtahCodeCamp.com/Sessions/ :

// Slide Toggle the headers
$(".collapse-track").each(function () {
 $(this).click(function () {
  $(this).next().slideToggle();
 });
 $(this).css("cursor", "pointer");
 $(this).next().hide();
});

Everything works perfectly in FireFox and Chrome/Safari but in IE8 the parent div (with the yellow border in the bottom) will not resize. Then, if you expand all categoried and collapse them again the catego开发者_运维问答ry titles sit right on top of each other.

Any ideas on how to fix this for IE8? I'm not as interested in compatability with IE6 or below, but I would like to support IE7/8.

The problem you are experiencing isn't directly related to the jQuery slideToggle mehod. Instead it is due to one of your CSS rules. I used the developer toolbar to change the following:

.FloatLeft {
   width: 850px;
   /*display: inline-block;*/ /* This line was causing the problem */
}

I have not tested if this will effect Firefox or chrome though.