JQuery UI Tabs - CSS Styling for IE9

Question

I'm hoping a css guru will be able to help me narrow down possible issues related to IE rendering for JQuery UI tabs. In Firefox and Chrome, my tabs render like so:

Rendering in Internet Explorer 9 fails pretty bad:

The Map and Field tabs are no longer sized to fit the parent container on the left side of the screen, and the tab headers fit the entire width of the parent container. Further, many of the JQuery UI events no longer fire, such as when I click a button from within the pane. I am not receiving any error messages from within the IE developer console, so I'm a bit lost as to why this is failing.

Answer 1

Found the problem. Nested within my jQuery UI tabs were several jQuery UI dialog boxes that were hidden on load. When they are loaded in Chrome and Firefox, their dimensions are ignored and jQuery UI renders the rest of the contained elements correctly. In Internet Explorer 9.0.8112.16421, the height of these elements are incorporated into the tab views, so that other elements are resized incorrectly, despite any element styling.

Moving these elements outside of the tab container solves the issue.