1 reply [Last post]
ghankstef
Offline
newbie
Last seen: 7 years 2 weeks ago
Joined: 2007-07-16
Posts: 1
Points: 0

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)

Discover the Hamline Difference | Hamline University School of Law





@import "/modules/aggregator/aggregator.css";
@import "/modules/node/node.css";
@import "/modules/system/defaults.css";
@import "/modules/system/system.css";

@import "/modules/user/user.css";
@import "/sites/default/modules/cck/content.css";
@import "/sites/default/modules/cck/fieldgroup.css";
@import "/sites/default/modules/nice_menus/nice_menus.css";
@import "/sites/default/modules/simplemenu/simplemenu.css";
@import "/sites/default/themes/hamlinewide/style.css";

#leftNav_ {
width:183px;
}
#rightNav_ {
width:184px;
}

#leftNav_ {
display: none;
}
#rightNav_ {
display: none;
}

#innernode {
margin-left: 20px;
width: 600px;
}

#main_ {
display:block;
}





Professor Blair with Students discussing law at Hamline




Discover the Hamline Difference

Hamline offers all the benefits you expect:



  • Nationally recognized faculty.

  • Rigorous curriculum supplemented with meaningful hands-on learning experiences through clinics, practicums, moot court competitions and more.

  • International study abroad opportunities.
  • Generous financial aid, scholarships and fellowships.


  • And we offer some things that might surprise you:



    • An alternative dispute resolution (ADR) program that is ranked third in the nation.

  • A growing new Health Law Institute.

  • A part-time weekend program.

  • Engaged alumni who are interested in welcoming new Hamline graduates into the legal community.



  • “Hamline is a place where they care about you, care about the law, and care about the world.”

    –A.L.Brown '03



    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.



    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. It‘s what we call the Hamline Difference.



    Please contact us at 651-523-2461 or 1-800-388-3688 or email us if you’re interested in learning more.

    • View
    • Edit


    Primary links






    Feature News


    • Laboratories of Democracy? Innovations in Health Law and Policy at the State Level

    • HUSL Faculty Help Science Museum Explore Legal Implications of Race

    • Health Law Institute Announces Advisory Board

    • Summer Course Offerings

    • Whither Competition?: An Examination of Concentration in the Health Care Marketplace.

    • Online Social Networking — The Good, the Bad and the Ugly.




    admin



  • My account
  • Log out
  • 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 * {
    }

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 1 year 44 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    If you've followed the ideas

    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.