Spry menu bar and z-index problem

mel222222222 · mel222222222

The z-index with ie thing is giving me fits on the Spry horizontal menu bar
application, and I could really use some advice. I have 3 elements below my
menu bar--a left navigation menu, some text, and an image. The dropdown menus
appear above the text, but below the left nav menu, and the image.

I've tried giving the left menu and the image a lower z-index (along with
position: relative or absolute. Nothing seems to work. Oh, and there happens to
be a flash element ABOVE my spry menu--that wouldn't affect it, though, would
it? HELP!!!

mel222222222 · mel222222222

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...

danilocelic AdobeCommunityExpert · danilocelic AdobeCommunityExpert

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:
[url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602[/url]

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

mel222222222 · mel222222222

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','sr c','_flash/photo_fade6','quali
ty','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P
1_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#ve
rsion=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_Versio
n=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>
[BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Stewardship Programs &
Processes</a></li>
[LI]<a class="MenuBarItemSubmenu" href="#">Stewardship
Projects</a></li>
[/BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental <br />
Stakeholder Relations</a></li>
[BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental Stakeholder
Information Center</a></li>
[LI]<a class="MenuBarItemSubmenu" href="#">External Stakeholder
Management</a></li>
[/BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental <br />
Services and Programs</a></li>
[BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Aquatic Monitoring</a></li>
[LI]<a class="MenuBarItemSubmenu" href="#">Cultural Resources</a></li>
[/BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental Science, <br />
Technology and Policy</a></li>
[BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental Policy &
Regulatory Outlook</a></li>
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental
Technologies</a></li>
[/BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental <br />
Resources and Services</a></li>
[BULLET]
[LI]<a href="#">Operations Support</a></li>
[LI]<a href="#">Resource Management</a></li>
[/BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental Assessment<br />
& Performance</a></li>
[BULLET]
[LI]<a class="MenuBarItemSubmenu" href="#">EMS Management</a></li>
[LI]<a class="MenuBarItemSubmenu" href="#">Environmental Performance
Assessment</a></li>
[/BULLET]
<li id="current"><a class="MenuBarItemSubmenu" href="#">OE&R <br />
Home</a></li>
[/BULLET]
<script type="text/javascript">

</script>
</div>
<div id="sidebar">
<div id="sidebar_menu">
[BULLET]
[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>
[/BULLET]
</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 · mel222222222

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:
[url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */
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;
}

danilocelic AdobeCommunityExpert · danilocelic AdobeCommunityExpert

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
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert

mel222222222 · mel222222222

Thanks, Danilo, for trying to help. I knew that code was going to be a mess.
But I'm okay for now using the negative number for z-index.

For future reference, do you have any suggestions on a "publicly accessible
server?" I've only ever worked on my company's server...

danilocelic AdobeCommunityExpert · danilocelic AdobeCommunityExpert

mel222222222 wrote:

> Thanks, Danilo, for trying to help. I knew that code was going to be a mess.
> But I'm okay for now using the negative number for z-index.
>
> For future reference, do you have any suggestions on a "publicly accessible
> server?" I've only ever worked on my company's server...
>

Glad that your issue seems to have resolved itself for the time being.

I've not used a "cheapy" web host in quite a while as I've had access to a dedicated web server. I'd recommend against a free host if you can get away with it, as they tend to server your pages with ads included in your output page in which generally Flash or scripting are used which potentially can interact with your page. Here are a couple that may be good for you with plans as low as $4-$5 per month going up depending on the features/options you want, I've used neither, but I've seen them mentioned:
[url]http://1and1.com/[/url]
[url]http://godaddy.com/[/url]

FWIW: I use Go Daddy as my domain name registrar and to me they have been very easy to use and have had no issues with them whatsoever.

I'd also suggest that you ask over in the Dreamweaver general forum for inexpensive web host suggestions:
[url]http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=189&entercat=y[/url]

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

kiwi125 · kiwi125

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

danilocelic AdobeCommunityExpert · danilocelic AdobeCommunityExpert

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
| [url]http://blog.extensioneering.com/[/url]
| WebAssist Extensioneer
| Adobe Community Expert

Unregistered · Unregistered

I had a similar problem. The solution isn't too bad.

Since the elements that are being covered won't respond to style="z-index: #" because they aren't relative positioned elements; just make them relative positioned elements without changing their top or left attributes. i.e. style="position: relative; z-index: #". This causes them to remain in the same place, but to be affected by the z-index attribute and consequently they may be tinkered with to get them above the other troublesome element.

I did it with a div that encloses a group of elements and it is working fine as far as I can see.

Spry menu bar and z-index problem

Thread Tools

Display

Spry menu bar and z-index problem

Similar Questions and Discussions

Spry Vertical Menu, Firefox, Focus Indication Problem

Problem with Spry Horizontal Menu Bar

Sub sub menu problem in spry vertical

Spry Horizontal Menu sizing Problem

CSS popup menu z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Re: Spry menu bar and z-index problem

Posting Permissions