Hi,
Regarding the JQuery tabs plug-in, I want to have variable width tabs,
depending on how long the tab text is. So, using the default style
sheet from the example (http://www.stilbuero.de/jquery/tabs/
jquery.tabs.css), I removed the "width: 64px;" line of the following
CSS block
.tabs-nav a {
display: block;
position: relative;
top: 1px;
z-index: 2;
padding: 6px 10px 0;
width: 64px;
height: 18px;
color: #27537a;
font-size: 12px;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
background: url(tab.png) no-repeat;
}
But on PC IE 7, now each tab takes up one horizontal line, each line
occupying 100% width of the viewable area. On Firefox, all the tabs
are correctly displayed on the same horizontal plane. How can I keep
the tabs on the same horizontal plane on IE while allowing for
variable length tabs?
Here is the other relevant HTML is it is useful ...
<table width="100%" id="allMyTabs" cellpadding="0"
cellspacing="0"
border="0">
<tr id="rowsOfTabs"><td><div id="container"><ul>
<li id="tab1"><a href="draw_modules.php?tab_id=1">
<span class="tabText">General</span> <span id="moduleCount1"
class="tabModuleCount">(7)</span>
</a></li>
<li id="tab6"><a href="draw_modules.php?tab_id=6">
<span class="tabText">Learning Management</span> <span
id="moduleCount6" class="tabModuleCount">(2)</span>
</a></li>
<li id="tab33"><a href="draw_modules.php?tab_id=33">
<span class="tabText">New Tab</span> <span id="moduleCount33"
class="tabModuleCount">(0)</span>
</a></li>
<li id="tab36"><a href="draw_modules.php?tab_id=36">
<span class="tabText">New Taww</span> <span id="moduleCount36"
class="tabModuleCount">(0)</span>
</a></li>
<li id="tab37"><a href="draw_modules.php?tab_id=37">
<span class="tabText">New Tab</span> <span id="moduleCount37"
class="tabModuleCount">(0)</span>
</a></li>
</ul></div></td></tr>
</table>
Thanks, - Dave
