Spry menu bar and z-index problem

kiwi125 wrote:
> All the z-index tweaking I have done has not fixed the sub menus rollover
> state.
>
> Anyone ever fixzd this issue?

Post a link to your page, and steps to see what the problem is and say what happens for you (in which browser(s)) and exactly what you expect to happen, and then someone can take a look to see what the problem might be as the answer is in the page.



--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

My other thread about my menu issues has brought me here. I am hit by the z-index bug and the fix in the spry css isn't helping at all.

My page is set up with

<div>menu</div>
<div position: relative;>content</div>

All the z-index tweaking I have done has not fixed the sub menus rollover state.

Anyone ever fixzd this issue?

Tony

mel222222222 wrote:
> Sorry--I'm new to the forum business. I wish I could send a link, but I can't.
> I'm on an working on an intranet behind a firewall. I can send the code for
> the html and the css, but it's gonna take up a lot of room--I apologize in
> advance for that. If there's a better way to do this, please let me know...
>
> Here's the html, and I'll send the css in the next reply:

Your posted code is exactly why I asked for a link, the forum software mangles code (replaces some tags, breaks lines that will break any JavaScript code, and most people are not able to take the time to try to clean up what the forum did to get your code back to it's (hopefully) original state. There are missing images, not only that, but there are three linked in JavaScript files that are required that aren't supplied. It's possible that someone has access to the exact copies of the files your linking to (maybe two of them, but probably not the insidenet one), perhaps the specific path used to link the files are messed up, perhaps it's the combination of all of the JavaScript files are the issue. No idea without seeing the code live and in a complete state.

I tried a quick clean up, but I'm not getting anything useful, in fact it's a mess on my end due to it not being live. It really is in your best interest to be able to get a temp demo page up on a publicly accessible server that demonstrates your exact problem. You do not have to include everything, but try recreating the minimal set of content/conditions in a page that replicates the issue and post that. There are plenty of free hosts out there and for as little as $4 a month you can set a testing site of your own, if your company won't pony up for one. Heck a year's worth of hosting could be paid for with only one question answered, such as the one you're trying to solve, which I'm sure you've spent way too much time on it already.

Sorry to not be able to help much, but without seeing a live version of the entire page, and be able to manipulate it, it's really difficult to solve many interaction issues.

--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Here's the css:

Here's the css:

* {
padding:0;
margin: 0;
}
body {
font: 11px/1.3em Arial, Helvetica, sans-serif;
text-align: left;
background-color: #FFFFFF;
}
/* --------------------- insidenet styles ------------------------ */
#toptile {
background-image: url(../_images/bg5.png);
background-repeat: repeat-x;
height: 35px;
}
#insidenet {
height: 35px;
}
/* --------------------- wrapper styles ------------------------ */
#wrapper {
width: 850px;
float: left;
position: relative;
background-image: url(../_images/leaf2.png);
background-repeat: no-repeat;
background-position: 16px bottom;
}
/* --------------------- main header styles ------------------------ */

#header {
height: 130px;
width: 850px;
}
#header_left {
float: left;
width: 569px;
}
#header_rt {
background-image: url(../_images/header7.png);
background-repeat: no-repeat;
background-position: right bottom;
float: right;
height: 130px;
width: 281px;
}
#search_box {
width: 281px;
float: left;
margin-top: 0px;
height: 35px;
}
#search_box p {
width: 223px;
border: 1px solid #278804;
height: 15px;
margin: 10px 0px 0px 7px;
padding: 3px 3px 0px 5px;
float: left;
}
#search_box img {
width: 27px;
float: right;
padding: 9px 0px 0px 0px
}
/* --------------------- tab menu styles ------------------------ */
#nav_tabs {
float: left;
width: 850px;
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
line-height: 10px;
text-align: center;
position: relative;
margin-top: 20px;
}
/*******************************************************************************

LEVEL 1 LAYOUT AND DESIGN

*******************************************************************************/

/* The outermost container of the Tab Bar, a box with no margin or padding */
ul.MenuBarHorizontal {
margin: 0;
padding: 0;
list-style-type: none;
}
/* Set the active Tab Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive {
z-index: 1000;
}
/* Tab Bar menu item parent containers--position children relative to these containers */
ul.MenuBarHorizontal li {
margin: 0px;
padding: 0px 0px 0px 6px;
position: relative;
cursor: pointer;
float: right;
background-image: url(../_images/left_gr3.png);
background-repeat: no-repeat;
background-position: left top;
}
/* Tab Bar menu items have padding and no text decoration */
ul.MenuBarHorizontal a {
cursor: pointer;
display: inline-block;
display: block;
background: url(../_images/right_gr3.png) no-repeat right top;
text-decoration: none;
color: #FFFFFF;
margin: 0px;
font-weight: bold;
padding: 8px 10px 6px 3px;
}
/* Tab Bar menu items that have mouse over or focus have bright green text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
color: #88FD3D;
}
/* Tab Bar menu items that are open with submenus are set to MenuBarItemHover with bright green text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
color: #88FD3D;
}
ul.MenuBarHorizontal #current {
background-image: url(../_images/left_wh.png);
padding-bottom: 0px;
}
ul.MenuBarHorizontal #current a {
background-image: url(../_images/right_wh.png);
color: #666666;
}
/*******************************************************************************

LEVEL 2 LAYOUT AND DESIGN

*******************************************************************************/

/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul {
margin: 0px 0px 0px -6px;
padding: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
position: absolute;
left: -1000em;
background-color: #FFFFFF;
width: 160px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}
/* Dropdown menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li {
display: block;
float: none;
background-image: none;
border-bottom: 1px solid #d7cfcf;
}
ul.MenuBarHorizontal ul a {
color: #666666;
background-image: none;
text-align: left;
padding: 0.75em 0.25em 0.75em 0em;
font-weight: normal;
line-height: 12px;
}
ul.MenuBarHorizontal ul a:hover {
color: #333333;
background-color: #d7cfcf;
margin-left: -6px;
padding-left: 6px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left: auto;
z-index: 1050;

}
/*******************************************************************************

LEVEL 3 LAYOUT AND DESIGN

*******************************************************************************/

/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul {
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left: auto;
top: 0;
}
/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe {
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* --------------------- sidebar styles ------------------------ */

#sidebar {
width: 210px;
float: left;
margin: 25px 0px 0px 6px;
padding-bottom: 100px;
z-index: 950;
position: relative;
}
#sidebar_menu {
float: left;
position: relative;
}
#sidebar_menu ul {
padding: 0;
width: 210px;
list-style-type: none;
z-index: 10;
}
#sidebar_menu ul li {
margin: 0;
padding: 0px 0px 0px 0px;
width: 210px;
list-style-type: none;
text-align: left;
}
#sidebar_menu ul a {
display: block;
cursor: pointer;
padding: 0.5em 0em 0.25em 1.5em;
text-decoration: none;
color: #278804;
letter-spacing: 0.03em;
font-weight: bold;
}
#sidebar_menu #current a {
color: #1c529b;
background-image: url(../_images/leaf_bullet.png);
background-repeat: no-repeat;
background-position: left;
padding: 0.5em 0em 0.25em 2em;
}
/* --------------------- content styles ------------------------ */
#content {
width: 610px;
float: right;
margin: 25px 0px 0px 0px;
padding: 0px 0px 20px 0px;
}
#content p {
color: #333333;
font-size: 12px;
line-height: 20px;
letter-spacing: 0.03em;
padding: 0px 0px 10px 0px;
}
#content a {
color: #1c529b;
}
#content a:hover {
}
/*Photo Wrapper*/

#divPhotoWrap {
width: 139px;
float: right;
}
/*Container for Photo*/

#divPhoto {
width: 139px;
}
#divPhoto img {
padding: 0px;
float: right;
}
/*Container for Photo Caption*/

#divPhotoText {
font-size: 9px;
float: right;
text-align: right;
width: 139px;
padding-top: 8px;
line-height: 11px;
}
.boldtext {
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
}
.captiontext {
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
}
/* -------------------- footer styles -------------------------------- */
#footer {
clear: both;
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
padding-top: 5px;
width: 610px;
float: right;
}
#footer a {
color: #1c529b;
}

Sorry--I'm new to the forum business. I wish I could send a link, but I can't. I'm on an working on an intranet behind a firewall. I can send the code for the html and the css, but it's gonna take up a lot of room--I apologize in advance for that. If there's a better way to do this, please let me know...

Here's the html, and I'll send the css in the next reply:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Page</title>
<script src="_scripts/SpryMenuBar.js" type="text/javascript"></script>
<script src="_scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src=" http://insidenet.tva.gov/scripts/insidenetHeader.js"></script>
<link href="_css/main_for_forum.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toptile">
<div id="insidenet">
<script language="JavaScript">
doHeader();
</script>
</div>
</div>
<div id="wrapper">
<div id="header">
<div id="header_left">
<script type="text/javascript">
AC_FL_RunContent( 'codebase',' http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','569','height','130','src','_flash/photo_fade6','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','_flash/photo_fade6' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="569" height="130">
<param name="movie" value="_flash/photo_fade6.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque">
<embed src="_flash/photo_fade6.swf" wmode="opaque" quality="high" pluginspage=" http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="569" height="130"></embed>
</object>
</noscript>
</div>
<div id="header_rt"> </div>
</div>
<div id="nav_tabs">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Land and Water<br />
Stewardship</a></li>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Stewardship Programs & Processes</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Stewardship Projects</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental <br />
Stakeholder Relations</a></li>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Stakeholder Information Center</a></li>
<li><a class="MenuBarItemSubmenu" href="#">External Stakeholder Management</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental <br />
Services and Programs</a></li>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Aquatic Monitoring</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Cultural Resources</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Science, <br />
Technology and Policy</a></li>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Policy & Regulatory Outlook</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Technologies</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental <br />
Resources and Services</a></li>
<ul>
<li><a href="#">Operations Support</a></li>
<li><a href="#">Resource Management</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Assessment<br />
& Performance</a></li>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">EMS Management</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Environmental Performance Assessment</a></li>
</ul>
<li id="current"><a class="MenuBarItemSubmenu" href="#">OE&R <br />
Home</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets_hor/SpryMenuBarDownHover.gif", imgRight:"SpryAssets_hor/SpryMenuBarRightHover.gif"});
//-->
</script>
</div>
<div id="sidebar">
<div id="sidebar_menu">
<ul>
<li><a href="safety.htm">Safety</a> </li>
<li><a href="deskof.htm">From the Desk of the Boss</a></li>
<li><a href="whatsnew.htm">What's New?</a></li>
<li><a href="#">Environmental Excellence Awards</a></li>
<li><a href=href="#">Environmental Information Center</a></li>
<li><a href="#">Winning Performance</a></li>
<li><a href="#" target="_blank">Organization Chart (PDF)</a></li>
<li><a href="#">Information & Resources</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="divPhotoWrap">
<div id="divPhoto"> <img src="_images/ray3.png" alt="Boss Photo" width="110" height="139" /> </div>
<div id="divPhotoText"> <span class="boldtext">Boss<br />
</span> <span class="captiontext">Title</span></div>
</div>
<p>Text here.</p>
<p>Text here.</p>
<p>Text here.</p>
<p>Text here.</p>
</div>
<div id="footer">
<p>
Please send inquiries or comments to the site administrator. </p>
</div>
</div>
</body>
</html>

mel222222222 wrote:
> I've narrowed things down--the two elements that appear in front of the
> dropdown menus--the sidebar navigation menu and the image--use position:
> relative. Adding a low z-index doesn't help. Taking the position attribute
> off the elements works; however, the elements go to all the wrong places on the
> page.
>
> I'm stumped, and could really use some help, as I'm up against a deadline...
>

You should state what element(s) you added a low z-index to, as the way I read your post the low z-index was added to the menu, and lower z-index makes elements appear lower in the stacking order. As always, posting a link will allow folks to see exactly what the problem is as well as the code in question. And you should post in the Spry forum as there are more Spry focused folks there:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602

--
Danilo Celic
| http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

I've narrowed things down--the two elements that appear in front of the dropdown menus--the sidebar navigation menu and the image--use position: relative. Adding a low z-index doesn't help. Taking the position attribute off the elements works; however, the elements go to all the wrong places on the page.

I'm stumped, and could really use some help, as I'm up against a deadline...