Bitten by the IE z-index bug
ghankstef
newbie
Posts: 1
Joined: 2007-07-16
Posted: Mon, 2007-07-16 15:04
I just can't seem to find a workaround to the IE z-index bug on this site:
http://law.hamline.edu/discover-hamline-difference.html
Mouse over prospective students, you will see a fly-out menu in Firefox, Safari but in IE the fly-out menu appears behind other content.
I am aware the IE 6 (and maybe 7) don't stack elements properly with z-index. I haven't found a workaround after trying many suggestions including this one:
http://cse-mjmcl.cse.bris.ac.uk/blog/2006/08/17/1155842931525.html
and this one: http://csscreator.com/node/8051
The main problem seems to be I have an absolutely positioned div (leftNav_) inside a relative positioned one already (wrap)and I'm trying to add a multi-layer menu on top of that
Here is the html in question (warning I've posted everything here - all html and css start by locating
in the html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Discover the Hamline Difference | Hamline University School of Law</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/sites/default/modules/nice_menus/nice_menus.js"></script>
<![endif]-->
<style type="text/css" media="all">@import "/modules/aggregator/aggregator.css";</style>
<style type="text/css" media="all">@import "/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/modules/system/defaults.css";</style>
<style type="text/css" media="all">@import "/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/sites/default/modules/cck/content.css";</style>
<style type="text/css" media="all">@import "/sites/default/modules/cck/fieldgroup.css";</style>
<style type="text/css" media="all">@import "/sites/default/modules/nice_menus/nice_menus.css";</style>
<style type="text/css" media="all">@import "/sites/default/modules/simplemenu/simplemenu.css";</style>
<style type="text/css" media="all">@import "/sites/default/themes/hamlinewide/style.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript"> </script>
<!--[if IE 6]>
<style>
#leftNav_ {
width:183px;
}
#rightNav_ {
width:184px;
}
</style>
<style media="print">
#leftNav_ {
display: none;
}
#rightNav_ {
display: none;
}
#innernode {
margin-left: 20px;
width: 600px;
}
#main_ {
display:block;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<ul class="links" id="audienceNav"><li class="first menu-1-1-2-active"><a href="/discover-hamline-difference.html" title="Hamline University Schoool of Law" class="menu-1-1-2-active active">Law School Home</a></li>
<li class="menu-1-2-2"><a href="/admissions/admissions-home.html" title="Prospective Students" class="menu-1-2-2">Prospective Students</a></li>
<li class="menu-1-3-2"><a href="/alumni/school-law-alumni.html" title="Alumni" class="menu-1-3-2">Alumni</a></li>
<li class="last menu-1-4-2"><a href="/legalcommunity" title="Employers, Local Legal Community" class="menu-1-4-2">Legal Community</a></li>
</ul> </div>
<div id="main_">
<div class="node">
<img src="http://law.hamline.edu/files/large_images/main_02.jpg" alt="Professor Blair with Students discussing law at Hamline" title="Professor Blair with Students discussing law at Hamline" width="1000" height="386" /> <div id="filmstrip">
<img src="/sites/default/themes/hamlinewide/images/filmstrip.jpg"/>
</div>
<div style="width: 800px; margin: 0 0 0 190px;">
<h1 class="title">Discover the Hamline Difference</h1>
<div class="content"><div id="lowright" style="margin-left: 30px;">
<h3 class="headerrow">Hamline offers all the benefits you expect:</h3>
<ul>
<li>Nationally recognized <a href="/professors/index.xml" target="_self">faculty</a>.
</li>
<li>Rigorous <a href="/curriculum/index.html" target="_self">curriculum </a>supplemented with meaningful hands-on learning experiences through <a href="/curriculum/clinics/index.xml" target="_self">clinics</a>, <a href="/curriculum/practicum_program/index.html" target="_self">practicums</a>, <a href="/curriculum/moot_court.html" target="_self">moot court competitions</a> and more.
</li>
<li><a href="/curriculum/global/index.html" target="_self">International study abroad</a> opportunities.
</li>
<li>Generous <a href="/hamline_info/offices_services/student_relations/sas/financial_aid/law/fa_office_law.html" target="_self">financial aid</a>, <a href="/admissions/scholarships.html" target="_self">scholarships</a> and fellowships. </li>
</ul>
<h3 style="margin-top: 8px">And we offer some things that might surprise you:</h3>
<ul>
<li>An <a href="/adr/index.html" target="_self">alternative dispute resolution </a>(ADR) program that is ranked third in the nation.
</li>
<li>A growing new <a href="/health/index.html" target="_self">Health Law Institute</a>.
</li>
<li>A <a href="/weekend/index.html" target="_self">part-time weekend program</a>.
</li>
<li><a href="/alumni/index.html" target="_self">Engaged alumni </a>who are interested in welcoming new Hamline graduates into the legal community. </li>
</ul>
</div>
<p>
<i>“Hamline is a place where they care about you, care about the law, and care about the world.” </i> <br />
–A.L.Brown '03
</p>
<p>
Consider Hamline if you're interested in a world-class law school
experience with all the warmth and friendliness you‘d expect to find in
the nation‘s heartland.
</p>
<p>
Most importantly, Hamline is friendly and welcoming. We believe law
school should prepare students to serve the needs the community and
society. The best way to achieve our mission? Fostering a caring
community of learners with students at the center. <b>It‘s what we call the Hamline Difference.</b>
</p>
<p>
Please contact us at 651-523-2461 or 1-800-388-3688 or <a href="javascript:do_mail('hamline.edu','lawadm')">email us</a> if you’re interested in learning more.
</p>
</div>
</div>
</div>
<div class="tabs" style="margin: 0 0 0 190px"><ul class="tabs primary">
<li class="active"><a href="/discover-hamline-difference.html" class="active">View</a></li>
<li><a href="/node/156/edit">Edit</a></li>
</ul>
</div>
</div>
<div id="leftNav_">
<div class="block block-nice_menus" id="block-nice_menus-2">
<h2 class="title"><span class="nice-menu-show-title">Primary links</span></h2>
<div class="content"><ul class="nice-menu nice-menu-right" id="nice-menu-2"><li id="menu-136" class="menu-path-node-156"><a href="/discover-hamline-difference.html" title="Hamline University Schoool of Law" class="active">Law School Home</a></li><li id="menu-175" class="menuparent menu-path-node-198"><a href="/admissions/admissions-home.html" title="Prospective Students">Prospective Students</a><ul><!--[if lt IE 7]><iframe></iframe><![endif]--><li id="menu-184" class="menu-path-node-205"><a href="/admissions/life-twin-cities.html" title="Life in the Twin Cities">Life in the Twin Cities</a></li><li id="menu-183" class="menu-path-node-199"><a href="/admissions/why-choose-hamline.html" title="Why Choose Hamline?">Why Choose Hamline?</a></li></ul></li><li id="menu-137" class="menu-path-node-63"><a href="/alumni/school-law-alumni.html" title="Alumni">Alumni</a></li><li id="menu-176" class="menu-path-node-335"><a href="/legalcommunity" title="Employers, Local Legal Community">Legal Community</a></li></ul></div>
</div>
</div>
<div id="rightNav_">
<div class="block block-views" id="block-views-newsitems">
<h2 class="title">Feature News</h2>
<div class="content"><div class='view view-newsitems'><div class='view-content view-content-newsitems'><div class="item-list"><ul><li><div class='view-item view-item-newsitems'><div class='view-field view-data-node-title'><a href="/health/laboratories-democracy-innovations-health-law-and-policy-state-level.html">Laboratories of Democracy? Innovations in Health Law and Policy at the State Level</a></div></div>
</li><li><div class='view-item view-item-newsitems'><div class='view-field view-data-node-title'><a href="/health/husl-faculty-help-science-museum-explore-legal-implications-race.html">HUSL Faculty Help Science Museum Explore Legal Implications of Race</a></div></div>
</li><li><div class='view-item view-item-newsitems'><div class='view-field view-data-node-title'><a href="/health/health-law-institute-announces-advisory-board.html">Health Law Institute Announces Advisory Board</a></div></div>
</li><li><div class='view-item view-item-newsitems'><div class='view-field view-data-node-title'><a href="/health/summer-course-offerings.html">Summer Course Offerings</a></div></div>
</li><li><div class='view-item view-item-newsitems'><div class='view-field view-data-node-title'><a href="/health/whither-competition-examination-concentration-health-care-marketplace.html">Whither Competition?: An Examination of Concentration in the Health Care Marketplace.</a></div></div>
</li></ul></div></div></div>
</div>
</div>
<div class="block block-views" id="block-views-events">
<h2 class="title"></h2>
<div class="content"><div class='view view-events'><div class='view-content view-content-events'><div class="item-list"><ul><li><div class='view-item view-item-events'><div class='view-field view-data-node-title'><a href="/cle/online-social-networking-good-bad-and-ugly.html">Online Social Networking — The Good, the Bad and the Ugly.</a></div></div>
</li></ul></div></div></div>
</div>
</div>
</div>
<div id="lower">
<div class="block block-user" id="block-user-1">
<h2 class="title">admin</h2>
<div class="content">
<ul class="menu">
<li class="collapsed"><a href="/audio">Audio</a></li>
<li class="leaf"><a href="/blog/admin">My blog</a></li>
<li class="collapsed"><a href="/node/add">Create content</a></li>
<li class="leaf"><a href="/tracker">Recent posts</a></li>
<li class="leaf"><a href="/user/admin">My account</a></li>
<li class="collapsed"><a href="/aggregator">News aggregator</a></li>
<li class="collapsed"><a href="/admin">Administer</a></li>
<li class="leaf"><a href="/logout">Log out</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Here is the css
first:
.block-nice_menus {
line-height:normal;
z-index:10;
}
ul.nice-menu, ul.nice-menu ul {
border-top:1px solid #CCCCCC;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
z-index:5;
}
ul.nice-menu li {
background-color:#EEEEEE;
border-color:-moz-use-text-color #CCCCCC rgb(204, 204, 204);
border-style:none solid solid;
border-width:0pt 1px 1px;
float:left;
position:relative;
}
ul.nice-menu a {
display:block;
padding:0.3em 15px 0.3em 5px;
}
ul.nice-menu ul, #header-region ul.nice-menu ul {
border-color:#CCCCCC -moz-use-text-color -moz-use-text-color;
border-style:solid none none;
border-width:1px 0pt 0pt;
display:none;
left:-1px;
margin-right:0pt;
position:absolute;
top:1.8em;
}
ul.nice-menu li.over ul {
display:block;
}
ul.nice-menu ul li {
display:block;
width:12.5em;
}
ul.nice-menu:after {
clear:both;
content:".";
display:block;
height:0pt;
visibility:hidden;
}
ul.nice-menu li:hover ul, ul.nice-menu li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul, ul.nice-menu li.over ul, ul.nice-menu li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul #header-region ul.nice-menu li:hover ul, #header-region ul.nice-menu li.menuparent li:hover ul, #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul, #header-region ul.nice-menu li.over ul, #header-region ul.nice-menu li.menuparent li.over ul, #header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
display:block;
}
ul.nice-menu li:hover ul ul, ul.nice-menu li:hover ul ul ul, ul.nice-menu li:hover li:hover ul ul, ul.nice-menu li:hover li:hover ul ul ul, ul.nice-menu li:hover li:hover li:hover ul ul, ul.nice-menu li:hover li:hover li:hover ul ul ul, ul.nice-menu li.over ul ul, ul.nice-menu li.over ul ul ul, ul.nice-menu li.over li.over ul ul, ul.nice-menu li.over li.over ul ul ul, ul.nice-menu li.over li.over li.over ul ul, ul.nice-menu li.over li.over li.over ul ul ul #header-region ul.nice-menu li:hover ul ul, #header-region ul.nice-menu li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover ul ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul, #header-region ul.nice-menu li:hover li:hover li:hover ul ul ul, #header-region ul.nice-menu li.over ul ul, #header-region ul.nice-menu li.over ul ul ul, #header-region ul.nice-menu li.over li.over ul ul, #header-region ul.nice-menu li.over li.over ul ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul, #header-region ul.nice-menu li.over li.over li.over ul ul ul {
display:none;
}
ul.nice-menu-right, ul.nice-menu-left, ul.nice-menu-right li, ul.nice-menu-left li {
width:12.5em;
}
ul.nice-menu-right ul {
left:12.5em;
top:-1px;
width:12.5em;
}
ul.nice-menu-right ul ul {
left:12.5em;
top:-1px;
width:12.5em;
}
ul.nice-menu-right li.menuparent, ul.nice-menu-right li li.menuparent {
background:#EEEEEE url(arrow-right.png) no-repeat scroll right center;
}
ul.nice-menu-right li.menuparent:hover, ul.nice-menu-right li.over, ul.nice-menu-right li li.menuparent:hover, ul.nice-menu-right li li.over {
background:#CCCCCC url(arrow-right.png) no-repeat scroll right center;
}
ul.nice-menu-left li ul {
left:-12.65em;
top:-1px;
width:12.5em;
}
ul.nice-menu-left li ul li ul {
left:-12.65em;
top:-1px;
width:12.5em;
}
ul.nice-menu-left li.menuparent, ul.nice-menu-left li li.menuparent {
background:#EEEEEE url(arrow-left.png) no-repeat scroll left center;
}
ul.nice-menu-left li.menuparent:hover, ul.nice-menu-left li.over, ul.nice-menu-left li li.menuparent:hover, ul.nice-menu-left li li.over {
background:#CCCCCC url(arrow-left.png) no-repeat scroll left center;
}
ul.nice-menu-left a, ul.nice-menu-left ul a {
padding-left:14px;
}
ul.nice-menu-down {
border:0pt none;
float:left;
}
ul.nice-menu-down li {
border-top:1px solid #CCCCCC;
}
ul.nice-menu-down li li {
border-top:0pt none;
}
ul.nice-menu-down ul {
left:0pt;
}
ul.nice-menu-down li ul li ul, #header-region ul.nice-menu-down li ul li ul {
left:12.5em;
top:-1px;
}
ul.nice-menu-down .menuparent a {
padding-right:15px;
}
ul.nice-menu-down li.menuparent {
background:#EEEEEE url(arrow-down.png) no-repeat scroll right center;
}
ul.nice-menu-down li.menuparent:hover, ul.nice-menu-down li.over, #header-region ul.nice-menu-down li.menuparent:hover, #header-region ul.nice-menu-down li.over {
background:#CCCCCC url(arrow-down.png) no-repeat scroll right center;
}
ul.nice-menu-down li li.menuparent {
background:#EEEEEE url(arrow-right.png) no-repeat scroll right center;
}
ul.nice-menu-down li li.menuparent:hover, ul.nice-menu-down li li.over, #header-region ul.nice-menu-down li li.menuparent:hover, #header-region ul.nice-menu-down li li.over {
background:#CCCCCC url(arrow-right.png) no-repeat scroll right center;
}
ul.nice-menu-down ul li {
clear:both;
}
ul.nice-menu li.menuparent ul, #header-region ul.nice-menu li.menuparent ul {
overflow:visible !important;
}
ul.nice-menu li.menuparent ul iframe, #header-region ul.nice-menu li.menuparent ul iframe {
display:block;
height:400px;
left:0pt;
position:absolute;
top:0pt;
width:400px;
z-index:-1;
}
ul.nice-menu li {
background-image:none;
margin:0pt;
padding-left:0pt;
}
#header-region ul.nice-menu li {
background:#DDDDDD none repeat scroll 0%;
line-height:normal;
margin:0pt;
padding:0pt;
}
#header-region ul.nice-menu-down li.menuparent {
background:#DDDDDD url(arrow-down.png) no-repeat scroll right center;
}
#header-region ul.nice-menu-down li li.menuparent {
background:#DDDDDD url(arrow-right.png) no-repeat scroll right center;
}Then
body {
background:#FFFFFF none repeat scroll 0%;
font-family:Verdana,Arial,sans-serif;
font-size:0.72em;
line-height:20px;
margin:0pt;
padding:0pt;
}
a {
color:navy;
}
h1 {
font-size:1.2em;
margin-bottom:0pt;
}
h2 {
font-size:1em;
margin-bottom:0pt;
}
h3 {
font-size:0.99em;
margin:0pt;
}
ul.nice-menu, ul.nice-menu ul, ul.nice-menu li {
background:transparent none repeat scroll 0%;
border:0pt none;
}
ul.nice-menu a, #leftNav_ ul, rightnav_ ul {
font-family:Verdana,Arial,sans-serif;
font-size:0.95em;
line-height:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:4px;
}
ul.nice-menu-right li.menuparent, ul.nice-menu-right li li.menuparent, ul.nice-menu-right li.menuparent a:hover, ul.nice-menu-right li li.menuparent a:hover {
background:transparent none repeat scroll 0%;
}
ul.nice-menu-right li ul {
background:#9A9077 none repeat scroll 0%;
opacity:1;
}
ul.nice-menu li:hover ul, ul.nice-menu li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li:hover ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul, ul.nice-menu li.over ul, ul.nice-menu li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.over ul, ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul #header-region ul.nice-menu li:hover ul, #header-region ul.nice-menu li.menuparent li:hover ul, #header-region ul.nice-menu li.menuparent li.menuparent li:hover ul, #header-region ul.nice-menu li.over ul, #header-region ul.nice-menu li.menuparent li.over ul, #header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
display:block;
z-index:9999;
}
.noTopMargin {
margin-top:0pt;
}
#user-login, .profile, #block-admin-display, #system-modules, .view {
margin:0pt 0pt 0pt 190px;
}
.view {
width:620px;
}
#rightNav_ div.view {
margin:0pt;
width:180px;
}
#block-views-health_law_news .title {
margin-left:190px;
}
h1.title {
}
#innernode {
margin-left:200px;
width:620px;
}
.item-list {
padding:3px 0pt 0pt 4px;
}
.item-list ul {
margin:0pt;
padding:0pt;
}
.expanded, .leaf, .collapsed, .item-list ul li {
line-height:16px;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin:0pt;
padding:6px 0pt 0pt;
}
.item-list ul li a {
text-decoration:none;
}
table {
border:1px solid #E7E5CE;
}
tbody {
border:medium none;
}
#leftNav_ .title {
margin:4px 0pt 0pt 10px;
}
#rightNav_ .title {
margin:4px 0pt 0pt 4px;
}
.admin, #system-admin-theme-settings {
margin-left:190px;
}
#lowright ul li, .leaf, .collapsed {
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
}
#wrap {
height:859px;
margin:0px auto;
position:relative;
width:1000px;
}
#header {
background:transparent url(images/header.jpg) no-repeat scroll 0%;
height:78px;
}
#audienceNav {
font-family:Lucida Sans Regular,Lucida Grande,Arial,Helvetica,Verdana,sans-serif;
margin:0pt;
padding:34px 0pt 0pt 146px;
}
#audienceNav li {
display:inline;
list-style-type:none;
margin:0pt;
padding:0pt 0pt 0pt 44px;
}
#audienceNav li a {
color:#FFFFFF;
letter-spacing:0.1em;
text-decoration:none;
}
#audienceNav li a:hover {
color:#9A9077;
text-decoration:none;
}
#main_ {
border-left:1px solid #E7E5CE;
border-right:1px solid #E7E5CE;
z-index:-1;
}
#leftNav_ {
background:#9A9077 none repeat scroll 0%;
height:386px;
left:0pt;
opacity:0.9;
position:absolute;
top:78px;
width:186px;
z-index:1;
}
#rightNav_ {
background:#9A9077 none repeat scroll 0%;
height:386px;
opacity:0.85;
position:absolute;
right:0pt;
top:78px;
width:187px;
z-index:1;
}
#leftNav_ ul li {
margin-bottom:8px;
}
#leftNav_ ul ul {
margin:0pt;
padding:0pt;
}
#leftNav_ ul li a, rightnav_ ul li a {
color:navy;
text-decoration:none;
}
#filmstrip_ {
width:1000px;
}
#lower {
padding:0pt 0pt 0pt 4px;
}
#lower ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#lower h3 {
margin:0pt;
}
#lower p, #lower ul {
margin-top:1px;
}
#lower {
margin:0pt;
}
#text {
margin:0pt;
padding:4px 0pt 0pt;
}
#lowright {
background:#E7E5CE none repeat scroll 0%;
float:right;
margin:0pt;
padding:0pt;
width:400px;
}
#lowright ul, #lowright h3, #lowright p {
margin:0pt;
padding:2px 2px 2px 4px;
}
.headerrow {
background:#9A9077 none repeat scroll 0%;
}
#nice-menu-2 li {
z-index:100;
}
#nice-menu-2 li:hover {
z-index:99999;
}
#nice-menu-2, #nice-menu-2 * {
}
Moderator
Posts: 5685
Joined: 2005-02-22
If you've followed the ideas
Posted: Mon, 2007-07-16 15:35
If you've followed the ideas in that CSS creator thread you should overcome the IE issues - at least for IE7. IE6 will need whatever:hover (or similar) to trigger the LI:hover rule which promotes its z-index above that of its siblings.
On Having Layout | The One True Layout | menus by listamatic