Hi guys... first post I have a few screenshots, source code and live links to illustrate my problem, but I am on full lock down as a new member, so please bear with me. 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; } PHP: 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. Screenshot: http://psylicyde.com/misc/tabs-test/tab1.jpg 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? Screenshot: http://psylicyde.com/misc/tabs-test/tab2.jpg Tab 3 This simple tab looks fine in FireFox but IE shows both contents from Tab 1 and Tab 2. Screenshot: http://psylicyde.com/misc/tabs-test/tab3.jpg I have a live example of this here: http://psylicyde.com/misc/tabs-test I have the source code 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?
At a quick glance, make sure the widths of each container element is explicitly defined and that overflow:hidden is applied to each container. Using display:none is a more simplistic way of doing this rather than the absoluteositioning.