Tabs not anchoring correctly

[alflow]

I have a relatively complex page layout, with multiple tabsets, each within a nested div.

The tabs seem to be absolutely positioned in IE7 and IE6 - they stay in place when I scroll the containing div (see screenshots).

A snippet of the HTML code in contained below.

<div id="pod_A" class="podInfo100">
  	<div id="pod_A_Header" class="podInfoHeader">
	  	<table class='header'>
			<tr>
				<td width="20"><img id="pod_A_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
				<td width="150"><h1 class='compact'>Client Profile</h1></td>
				<td><span id="pod_A_Header_SubInfo"></span></td>
			</tr>
		</table>
	</div>
	<div id="pod_A_Content_Container">
		<div id="pod_A1" class="podInfo50">
			<div id="pod_A1_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A1_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Information</h1></td>
						<td><span id="pod_A1_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A1_subcommands"><input type="button" id="btn_client_edit" name="btn_client_edit" value="Edit" /></span></td>
					</tr>
				</table>
			</div>
			<div id="pod_A1_Content_Container" class="podInfo100">
				<div id="pod_A1_Content" class="podInfoContent">
					<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
				</div>
			</div>
		</div>
		<div id="pod_A2" class="podInfo50">
			<div id="pod_A2_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A2_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Contacts</h1></td>
						<td><span id="pod_A2_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A2_subcommands">
							<input type="button" id="btn_A2_fn" name="btn_A2_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A2_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A2_Tabs">
					<ul>
						<li><a href="#pod_A2_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A2_Tab1" class="pad_none">
					<div id="pod_A2_Content" class="podInfoContent"></div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
			</div>
		</div>
		
		<!-- Notes pod -->
		<div id="pod_A3" class="podInfo100">
			<div id="pod_A3_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A3_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Notes</h1></td>
						<td><span id="pod_A3_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A3_subcommands">
							<input type="button" id="btn_A3_fn" name="btn_A3_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A3_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A3_Tabs">
					<ul>
						<li><a href="#pod_A3_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A3_Tab1" class="pad_none">
					<div id="pod_A3_Content" class="podInfoContent">
						<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
					</div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
			</div>
		</div>
		<!-- Addresses pod -->
		<div id="pod_A4" class="podInfo100">
			<div id="pod_A4_Header" class="podInfoHeader">
				<table class='header'>
					<tr>
						<td width="20"><img id="pod_A4_Arrow" src="assets/images/ui/pod_max.gif" width="16" height="16" /></td>
						<td width="50"><h1 class='compact'>Addresses</h1></td>
						<td><span id="pod_A4_Header_SubInfo"></span></td>
						<td align="right"><span id="pod_A4_subcommands">
							<input type="button" id="btn_A4_fn" name="btn_A4_fn" value="Add" />
						</span></td>
					</tr>
				</table>
			</div>
			<!-- Content -->
			<div id="pod_A4_Content_Container" class="podInfo100" style="margin:0;padding:0">
				<!-- Tabs -->
				<div id="pod_A4_Tabs">
					<ul>
						<li><a href="#pod_A4_Tab1"><span>List</span></a></li>
					</ul>
				</div>
				<!-- List -->
				<div id="pod_A4_Tab1" class="pad_none">
					<div id="pod_A4_Content" class="podInfoContent">
						<p align="center"><img src="assets/images/ui/i_loading.gif" width="16" height="16" alt="loading" /></p>
					</div>
				</div>
				<!-- Form -->
				<!-- DIV created on the fly -->
				</div>
			</div>
		</div>
	</div>
</div>

[alflow]

Before scrolling

[alflow]

After scrolling

[aaronchi]

This is not an issue with the script but an issue with the css.

If relatively positioned elements are placed inside of a scrolling container, IE treats them as position:fixed. To fix this, just add position:relative to the container element.

[neojp]

This is a hasLayout bug on the Site css, not the script.

He may use position: relative; to the parent container which has overflow to enable layout on that div, or keep trying any other trick to enable it (like zoom, border, background, etc).

[(none)]

Milestone 1.2.4 deleted