Hi, I have a page I am working on and in FF 3.05, it works fine. However, in IE 7.0, the dropdown is hidden by the <div> underneath. I tried setting the Z-index low on the <div>, but no luck. Any and all suggestions will be greatly appreciated. Thanks in advance, Jake
Without code we can't tell you much, though I would suspect you either have position:relative on an element you shouldn't, are missing it on an element you should, or have forgotten that position inherits from parents and works across siblings - which means you want the z-index of the topmost element on the parent element that is kin to the one you want positioning over. For example if you have a UL and a DIV <ul> <li>test</li> </ul> <div>test2</div> To position the LI over the DIV using z-index you need to set the z-index on the UL, not the LI. Setting it on the LI sets the z-index relative to the UL, therin the DIV still ends up a higher sort priority being later in the code. But again, that's all guesswork. No code, no joy.
here is the code... 2 external files and one html: Thanks for any and all... j HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css"href="FavLInksExp.css"/> <link rel="stylesheet" type="text/css" href="../menu/menu_style.css" <style type="text/css"> <!-- --> </style> </head> <body> <div id="wrapper"> <div class="header"> header </div> <div class="lcontainer"> left <div> </div> </div> <div class="mcontainer"> <div class="unavbar"> <div class="nav-container-outer"> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="indexX.html" target="_self"> Home </a><!--Home--> </li> <li><span class="divider divider-vert" ></span></li> <li><a href="#" title="Store" target="_self"> Store </a><!--Store--> <ul style="width:150px;"> <li><a href="MusicX.html" title="Music" target="_self" >Music</a></li> <li><a href="PlaysX.html" title="Plays" target="_self" >Plays</a></li> <li><a href="VideosX.html" title="Video" target="_self" >Video</a></li> <li><a href="FreeX.html" title="Free" target="_self" >Free</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" target="_self">Fun Stuff</a><!--Fun Stuff--> <ul style="width:150px;"> <li><a href="FavLinksX.html" title="Favorite Links" target="_self">Favorite Links</a></li> <li><a href="../AlbumsFl/CapMoments.html" title="Photos" target="_self" >Photos</a></li> <li><a href="FunPlacesX.html" title="Places" target="_self" >Places</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" target="_self">History</a><!-- History --> <ul style="width:150px;"> <li><a href="HistoryX.html" title="Musical History Tour" target="_self" >Musical History Tour</a></li> <li><a href="LifeTimesX.html" title="Life and Times" target="_self" >Life and Times</a></li> <li><a href="WitnessX.html" title="Witness" target="_self" >Witness</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#" target="_self">Wordsmithing</a> <ul style="width:150px;"> <li><a href="QuickWordX.htm" title="A Quick Word" target="_self" >A Quick Word</a></li> <li><a href="SaysX.html" title="Somethig to Say" target="_self" >Somethig to Say</a></li> <li><span class="submenu"> Clippings</span></li> <li><a href="ClippingsAX.htm" title="Articles" target="_self"> >Articles</a></li> <li><a href="ClippingsIX.htm" title="Interviews" target="_self"> >Interviews</a></li> <li><a href="ClippingsRmX.htm" title="Remarks" target="_self"> >Remarks</a></li> <li><a href="ClippingsRvX.htm" title="Reviews" target="_self"> >Reviews</a></li> </ul> </li> <li><span class="divider divider-vert" ></span></li> <li><a href="OnAirX.htm" target="_self" class="item-primary style1">On the Air</a></li><!-- On the Air --> <li><span class="divider divider-vert" ></span></li> <!--<li class="clear"> </li>--> <li><a class="item-primary" href="#" target="_self">Spotlight</a><!-- Spotlight --> <ul style="width:150px;"> <li><a href="ElementsX.htm" title="Elements" target="_self" >The Elements</a></li> <!--<li><a href="storePlays" title="Plays" target="_self" >Other Artists</a></li>--> <li><span class="submenu">Christian</span></li> <li><a href="LifeTeenX.htm" title="Life Teen" target="_self" > >Life Teen</a></li> <li><a href="FestX.htm" title="Fest" target="_self" > >Fest</a></li> </ul> </li> </ul> </div> </div> <div class="text"> middle </div> <div class="footer"> footer <ul class="bnavbar"> <li>Home</li> <li>Store</li> <li>Photos</li> <li>Contact</li> </ul> </div> </div> <div class="rcontainer"> right </div> </div> </body> </html> CSS FILE 1:<link rel="stylesheet" type="text/css"href="FavLInksExp.css"/> /* CSS Document */ body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #wrapper { margin:0 auto; clear:both; background-color:#00DF00; width:100%; float:left; position:relative; height:900px; } .header { background-color:#FFBFFF; width:100%; float:left; position:relative; height:100px; margin-top:50px; } .lcontainer { float:left; position:relative; background-color:#2AFF55; width:20%; height:600px; } .mcontainer { float:left; position:relative; background-color:#551FFF; width:60%; height:600px; } .unavbar { float:left; position:relative; width:100%; height:31px; background-color:#C0DCC0; } .text { float:left; position:relative; width:100%; height:800px; background-color: #FF7F55 ; margin-top:30px; z-index:1; } .rcontainer { float:left; position:relative; background-color:#66FFFF; width:20%; height:600px; } .footer { float:left; position:relative; background-color:#7FBF55; height:75px; width:100%; } .bnavbar { text-align:center; } .bnavbar li{ display:inline; width:100px; text-align:center; padding:0 10px 0 10px; border-width:2px; border-color:#2A0000; border-style:groove ; height:20px; background-color:#FFFFFF; margin-right:2px; } .bnavbar li:hover { background-color:#FF0000; border-right-style:outset; border-right-width:3px; } CSS FILE 2: <link rel="stylesheet" type="text/css" href="../menu/menu_style.css" @charset "utf-8"; /* CSS Document */ /*^'^ Navigation Structure ^'^*/ .nav-container-outer{ background: #40435C; padding: 0px; height: 74px; background: url(images/nav-bg.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container .submenu { font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-left:5px; color:#393A44; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; /*position:relative;*/ } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:210; } .nav-container ul ul{ z-index:220; } .nav-container ul ul ul{ z-index:230; } .nav-container ul ul ul ul{ z-index:240; } .nav-container ul ul ul ul ul{ z-index:250; } li:hover>ul{ left:auto; } #nav-container ul { top:80%; } #nav-container ul li:hover>ul{ top:0px; left:100%; } /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 0px 7px 0px; margin: 10px 15px 0px 10px; color: #605d97; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(images/item-primary-bg.gif); background-repeat: no-repeat; background-position: top; } #nav-container a:hover{ color: #000000; background: url(images/item-primary-bg.gif); background-repeat: no-repeat; background-position: center; } /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul { padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(images/item-secondary-container-bg.jpg); background-repeat: repeat-x; background-color: #A7AAC9; border-bottom: 1px solid #A7AAB9 } /*^'^ Secondary Items ^'^*/ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #000000; background: url(images/item-secondary-bg.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; } /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #000000; background: url(images/item-secondary-bg.jpg); background-repeat: no-repeat; color:#636882; } /*^'^ Secondary Item Titles ^'^*/ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #636882; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(images/item-secondary-title-bg.jpg); */ background-repeat: no-repeat; font-weight:bold; } /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #3a3c52; } /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; } Code (markup):