CSS issues: jQuery tabs with floats

[ripcurlksm]

Hi guys, I am using jQuery tabs on a site which has been working great. Until recently, I had to add more dynamic content inside these tabs and I am coming across a few issues.... In order to show dynamic content inside the 'hidden' jQuery tabs, I had to change the CSS property from dispaly:none to an absolute position and left aligning it off the page.

.tabs-hide {
/*display: none;*/
position: absolute;
left: -10000px;
}

This has worked great, but in doing this, I have caused a new problem. Shown below. (source code and example linked at bottom)

Tab 1
Firefox on the left here looks great, but IE on the right is showing content from Tab 2... content that is floated right. If i remove the float, this issue goes away, but I want to float this right.
http://www.webdeveloper.com/forum/attachment.php?attachmentid=12863&stc=1&d=1247609722

Tab 2
Firefox on the left looks great, but IE on the right is showing content from Tab 1. I wonder if the CSS property applied to this table is causing the issue?
http://www.webdeveloper.com/forum/attachment.php?attachmentid=12864&stc=1&d=1247609722

Tab 3
This simple tab looks fine in FireFox but IE shows both contents from Tab 1 and Tab 2.
http://www.webdeveloper.com/forum/attachment.php?attachmentid=12865&stc=1&d=1247609722

I have a live example of this here:
http://psylicyde.com/misc/tabs-test

I have the source code available here:
http://psylicyde.com/misc/tabs-test/test.zip

Any ideas on how to get the table in tab 1 to display correctly and the float in tab 2 to display correctly in Internet Explorer?