toicontien
11-02-2004, 04:50 PM
I've run into this frustration before with IE-Win not properly stacking absolute and relative positioned content. See a screen shot of IE-Win and Firefox side-by-side rendering the sub navigation DHTML menus (http://template-tk.ispi.net/vimages/L3/skin3/IE-Positioning-Bug.gif).
Live link: http://template-tk.ispi.net/?template=L3
Related files
* http://template-tk.ispi.net/css/L3/skin3/screen/layout.css
* http://template-tk.ispi.net/css/L3/skin3/screen/DHTMLmenu.css (alternate style sheet enabled by JavaScript)
* http://template-tk.ispi.net/javascripts/dropdowns.js
The main navigation is a series of unordered lists where <li> tags contain another unordered list that's absolutely positioned. The general markup structure of the main navigation is below:
<ul id="navRoot">
<li id="frontPageLink"><a>Front Page</a>
<li class="hasSubs">
<a>Parent section</a>
<ul class="subs" id="subs[n]">
<li><a><span>Parent section: </span>Sub section</a></li>
</ul>
</li>
<li><a>Parent section</a></li>
.
.
.
</ul>
<script>
initializeMenu(); // Call to function in dropdowns.js
</script>
1. The first-level <li> tags are floated left and not positioned.
2. The first-level <li class="hasSubs"> tags are positioned relatively, in addition to Number 1 above.
2. The first-level <a> tags are block level
With JavaScript enabled:
3. The second level <ul class="subs"> tags are positioned absolutely and given a z-index of 100; They are positioned down 100% and left 0. A negative .2em top margin pulls the sub menu up a little.
In IE-Win, using Holy Hack
4. The second-level <li> tags (inside <ul class="subs">) are floated left, given a 1 pixel height and 120px width to get rid of IE-Win's <li> + block level <a> tag bug.
Since the main navigation is written dynamically, i.e. the number of parent and sub sections will never be known, nor will their IDs, is there any sort of CSS hack to get IE-Win to properly stack relatively and absolutely positioned content without assigning each positioned element a unique z-index?
Live link: http://template-tk.ispi.net/?template=L3
Related files
* http://template-tk.ispi.net/css/L3/skin3/screen/layout.css
* http://template-tk.ispi.net/css/L3/skin3/screen/DHTMLmenu.css (alternate style sheet enabled by JavaScript)
* http://template-tk.ispi.net/javascripts/dropdowns.js
The main navigation is a series of unordered lists where <li> tags contain another unordered list that's absolutely positioned. The general markup structure of the main navigation is below:
<ul id="navRoot">
<li id="frontPageLink"><a>Front Page</a>
<li class="hasSubs">
<a>Parent section</a>
<ul class="subs" id="subs[n]">
<li><a><span>Parent section: </span>Sub section</a></li>
</ul>
</li>
<li><a>Parent section</a></li>
.
.
.
</ul>
<script>
initializeMenu(); // Call to function in dropdowns.js
</script>
1. The first-level <li> tags are floated left and not positioned.
2. The first-level <li class="hasSubs"> tags are positioned relatively, in addition to Number 1 above.
2. The first-level <a> tags are block level
With JavaScript enabled:
3. The second level <ul class="subs"> tags are positioned absolutely and given a z-index of 100; They are positioned down 100% and left 0. A negative .2em top margin pulls the sub menu up a little.
In IE-Win, using Holy Hack
4. The second-level <li> tags (inside <ul class="subs">) are floated left, given a 1 pixel height and 120px width to get rid of IE-Win's <li> + block level <a> tag bug.
Since the main navigation is written dynamically, i.e. the number of parent and sub sections will never be known, nor will their IDs, is there any sort of CSS hack to get IE-Win to properly stack relatively and absolutely positioned content without assigning each positioned element a unique z-index?