[thelist] problem handling the menu + select box bug in IE

[Matt Warden]

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 &raquo;</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 &raquo;</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.