#2666 closed bug (notabug)

Opened April 08, 2008 04:35AM UTC

Closed May 05, 2008 05:31AM UTC

Last modified May 24, 2008 03:39AM UTC

Tabs not anchoring correctly

Reported by: alflow Owned by: klaus
Priority: major Milestone:
Component: ui.core Version: 1.2.3
Keywords: tabs absolute position Cc:
Blocked by: Blocking:
Description

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>
Attachments (0)
Change History (5)

Changed April 16, 2008 08:29AM UTC by paul comment:1

owner: paul → klaus

Changed May 04, 2008 03:59PM UTC by aaronchi comment:2

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.

Changed May 04, 2008 06:30PM UTC by neojp comment:3

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).

Changed May 05, 2008 05:31AM UTC by paul comment:4

resolution: → invalid
status: new → closed

Changed May 24, 2008 03:39AM UTC by comment:5

milestone: 1.2.4

Milestone 1.2.4 deleted