#2666 closed bug (notabug)
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 (2)
Change History (7)
Changed 15 years ago by
Attachment: | Tabs_BeforeScroll.gif added |
---|
comment:1 Changed 15 years ago by
Owner: | changed from paul to klaus |
---|
comment:2 Changed 15 years ago by
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.
comment:3 Changed 15 years ago by
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).
comment:4 Changed 15 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
Before scrolling