jQuery Forum

1. <div id="tabs">
2.     <ul>
3.         <li><a href="#tabs-1">Project Browser</a></li>
4.         <li><a href="#tabs-2">Importer</a></li>
5.     </ul>
6.     <div id="tabs-1">
7.         <div id="tabs-1-content">
8.         <div id="projDirList">
9.             <ul id="projMenu" style="overflow-y: scroll; overflow-x: hidden;">
10.                 <li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
11.             </ul>
12.             <button class = "browseProjBtn" onclick="browseProjDir()" style = "float: right; margin: 10px 0 0 0;">Browse</button>
13.         </div>
14.         <div id="shotAssetList">
15.             <ul id="shotAssetMenu" style="overflow-y: scroll; overflow-x: hidden;">
16.                 <li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
17.             </ul>
18.                  <div id="radioShotAssets">
19.                 <input type="radio" id="radioShots" name="radio"  checked="checked"/><label for="radioShots">Shots</label>
20.                 <input type="radio" id="radioAssets" name="radio" /><label for="radioAssets">Assets</label>
21.             </div>
22.         </div>
23.         <div id="compList">
24.             <ul id="compMenu" style="overflow-y: scroll; overflow-x: hidden;">
25.                 <li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
26.             </ul>
27.         </div>
28.         </div>
29.     </div>
30.     <div id="tabs-2">
31.         <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
32.     </div>
33. </div>

Intialized in the head with:

1. $( "#tabs" ).tabs();

The weird this is, it shows up fine at first but if I mouseOver the importer tab it suddenly shrinks. This is in an .HTA file running as IE7 (from what I gather). And its worse in firefox. Is this due to me using Menu's in the div, should I be using selectors (can selectors have icons, or can menus have multiselect)

This is my html (the testing list item is just there to make sure I can even have one with an icon, this one works)

1. <div id="projDirList">
   <ul id="menu">
    <li><a href="#test"><span class = "ui-icon ui-icon-folder-collapsed"></span>testing</a></li>
   </ul>
   </div>
2. <button onclick="browseProjDir()">Browse</button>

1.    3. function browseProjDir() {
2.              $("#projDirList ul").append("<li><a href='#'>" + "testing2" + "</a></li>");
3.       }