Tabs and Content becoming separated
Hi,
Has anyone had this experience with jQuery tabs?
I have a standard tab layout on a jQuery dialog div.
<code>
<div id="imgTabContainer" style="width: 400px">
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item"><a href="#difragment-1">Details</a></
li>
<li class="ui-tabs-nav-item"><a href="#difragment-2">Events</a></li>
</ul>
<div id="difragment-1">
<form id="frmImage" class="">
<input id="frmImageElementID" type="hidden" value="" />
<input id="frmImageFilename" type="hidden" value="" />
<input id="frmImageHeight" type="hidden" value="" />
<input id="frmImageWidth" type="hidden" value="" />
<table border="0" align="left" cellpadding="4" cellspacing="4"
rules="none">
<tr>
<td height="100" width="100"><img id="frmImagePreview" src="../../
img/please-select-image.jpg" width="100" height="100" hspace="0"
vspace="0" border="0" align="absmiddle" /></td>
<td valign="top" width="200">
<select id="frmImageID" onchange="swapImage();">
<option value="-1" selected="selected">-- Please select --</option>
...
</select>
</td>
</tr>
</table>
</form>
</div>
<div id="difragment-2" class="ui-tabs-nav ui-tabs-hide">
Blah, blah, blah
</div>
</code>
When this renders, I get the table element 'outside' the tab container
i.e. the table starts in the right place but it overflows the tab box
vertically. The tab box element stretches briefly to the size of the
form when I change tabs but then snaps back to, what appears like,
empty.
Kind regards
P