jQuery Forum

Been really busy and was just tasked with looking into upgrading to the latest jquery ui, however I am very disappointed with the button icons as functionality has been removed.

1. .tab_scroller {
2. overflow: auto;
3. }

1. <div id="tab_container" style="font-size:10px;">
2.       <div class="tab_scroller">
3.             <ul id="tabs">
4.                   <li><a href="#tab_container">Tab 1</a></li>
5.                   <li><a href="#tab_container">Tab 2</a></li>
6.                   <li><a href="#tab_container">Tab 3</a></li>
7.                   <li><a href="#tab_container">Tab 4</a></li>
8.                   <li><a href="#tab_container">Tab 5</a></li>
9.                   <li><a href="#tab_container">Tab 6</a></li>
10.                   <li><a href="#tab_container">Tab 7</a></li>
11.             </ul>
12.       </div>
13.       <div id="items_tab_container" style="padding:0;padding-right:2px;">
14.             <table id="items_grid"></table>
15.       </div>
16. </div>

Works fine on Chrome and FireFox, however strange occurrence using IE (surprise, surprise).  When I hover over a tab or leave it and its state changes to hover or default (no change on selected tab), the DIV with class tab_scroller seems to get higher by one line, however IE still shows its height as 56.24px, yet frames a div that is obviously far higher (after debug panel refresh, shows height as 56.24px regardless of the new height).  IE debugger shows nothing inside the DIV to cause this and I'm at a loss. When I select a tab, the gap vanishes, even though I have not updated the DIV or the tabs or trapped an event to change anything.

I know it is an obvious IE bug, but for deployment I need to fix it.  I have tried setting the max-height, but this does nothing, the DIV still gets higher.  I even tried overflow-y:hidden, again no success.  IE seems to make it higher with every hover or off hover continuously.

This only happens if there is a horizontal scroll bar beneath the tabs due to them clipping the width (the tab width is set fine so as not to cause a wrap). If there is no scroll bar (tabs fit the width), it is fine.  I even tried setting the max-height to 29, the horizontal scroll bar masked the bottom part of the tabs, yet on getting higher, it stayed put and did not reveal the masked part of the tabs, even though IE showed the DIV getting higher.

I tried setting .tab_scroller { overflow:hidden } and the bug vanished, however I need the horizontal scroll bar.

Besides another IE bug, has anybody any idea what this is or how to stop it?