jQueryUI Tabs look very large in IE 8
Is there any reason why my jQuery UI tabs would appear 3 times larger in IE 8 than in Firefox or Chrome?
I use jQuery tabs throughout my site without a problem. The on one page I decided to nest in a set of tabs. This works fine on Firefox and Chrome, but on IE the tabs and associated fonts have become huge.
I don't think I'm doing anything weird in CSS.
Here's what my code is like (yeah, I ripped it off from another post I submitted recently :-)) :
<div id="main" class="ui-widget"
.....
<div id="mainCol" class="ui-widget-content ui-corner-all">
<p> blah blah blah </p>
<div id="wrapper">
<p> blah blah </p>
<div id="details">
<p> More blah blah </p>
</div> <!-- end details -->
<div id="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 1</a></li>
<li><a href="#tab3">Tab 1</a></li>
<li><a href="#tab4">Tab 1</a></li>
<li><a href="#tab5">Tab 1</a></li>
</ul>
<div id="tab1">
etc....</div>
<div id="tab2">
</div>
etc....
The tabs labels are several sizes too large and I can't figure out why that's happening in IE and only IE. Does anyone have any idea? Please let me know if you need me to provide more info.
Thanks!