[thelist] problem handling the menu + select box bug in IE
Matt Warden
mwarden at gmail.com
Thu Mar 23 16:17:56 CST 2006
There is a "bug" in IE that is messing with a menu on my client's
site. It is a tab menu, where a hover over a tab expands a ul
underneath it. Some list items in this ul have a submenu. THe bug
causes select boxes underneath where the ul expands to peek through,
as if its z-index were higher.
(see http://support.microsoft.com/kb/q177378/ ,
http://weblogs.asp.net/bleroy/archive/2005/08/09/422047.aspx)
I have been able to successfully use the iframe hack to keep the
expanding ul underneath the tab from being disrupted by select boxes
underneath. However, for submenus I cannot figure out how to apply
this hack. (I'm not responsible for this portion of the site, but I've
been asked to take a stab at the problem.) Here's the markup:
<div id="navbox" class="clearfix">
<ul id="nav">
<li class="schedule"><a href="#" title="">Schedule</a>
<ul class="schedule_submenu">
<li><a href="#" title="">Schedule Management</a></li>
<li><a href="#" title="">Schedule Configuration »</a>
<ul class="schedule_subsubmenu">
<li><a href="#" title="">Hours of Operation</a></li>
<li><a href="#" title="">Staff & Resources</a></li>
<li><a href="#" title="">User Roles</a></li>
</ul>
</li>
<li><a href="#" title="">Appointment Scheduling</a></li>
<li><a href="#" title="">Queuing</a></li>
</ul>
</li>
<li class="patient"><a href="#" title="">Patient</a>
<ul class="patient_submenu">
...
</ul>
</li>
<li class="billing"><a href="#" title="">Billing</a>
...
</li>
</ul>
<iframe id="menu_iframe" scrolling="no" frameborder="0"
src="/assets_css/images/practice/trans1x1.gif" ></iframe>
</div>
The iframe has z-index 10, position absolute, display none.
I tried putting another iframe in the list item of the submenu, and
that did not work. e.g.:
<li><a href="#" title="">Schedule Configuration »</a>
<ul class="schedule_subsubmenu">
<li><a href="#" title="">Hours of Operation</a></li>
<li><a href="#" title="">Staff & Resources</a></li>
<li><a href="#" title="">User Roles</a></li>
</ul>
<iframe id="menu_iframe2" scrolling="no" frameborder="0"
src="/assets_css/images/practice/trans1x1.gif" ></iframe>
</li>
This is not my area of expertise, so if anyone has any ideas, let me know.
Thanks in advance,
--
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com
This email proudly and graciously contributes to entropy.
More information about the thelist
mailing list