close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

The Dreaded IE7 z-index bug HELP

Thread began 7/05/2011 11:27 am by alistair316863 | Last modified 7/14/2011 12:13 pm by Mike Perry | 2837 views | 12 replies |

alistair316863

The Dreaded IE7 z-index bug HELP

I know this has been addressed numerous times but I am having a nightmare I have got the dropdowns to be above the images below but when i try to click on or move mouse further down than containing div the menu dropdowns disapear see my css below any help much appreciated:



ul#cssmw {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
z-index:5000;
}
ul#cssmw ul {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
}
ul#cssmw ul li {
background-image: none;
float: none;
}
ul#cssmw li {
background-image: none;
float: left;
padding:0;
position: relative;
white-space: nowrap;
z-index:1000;
}
ul#cssmw li ul {
display: none;
top: 0;
}
ul#cssmw li:hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.hover > ul {
display: block;
position: absolute;
}

ul#cssmw li.current > ul {
position: absolute;
}
ul#cssmw > li {
background-image: none;
}
ul#cssmw > li > a, ul#cssmw > li > a:link {
background-image: url(../../img/divider.png);
background-repeat:no-repeat;
background-position:right;
border-right: none;
color: #003366;;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight:bold;
margin:0;
padding: 16px 10px 18px 10px;
text-decoration: none;
text-transform: uppercase;
outline-style: none;
}
ul#cssmw > li > a:active, ul#cssmw > li > a:focus {
background-color:none;
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw > li:hover > a, ul#cssmw > li:hover > a:link {
color: #FFFFFF;
font-weight:bold;
text-decoration: none;
outline-style: none;
text-shadow: 0px 0px 0px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}

ul#cssmw > li.hover > a, ul#cssmw > li.hover > a:link {
color: #003366;
font-weight:normal;
text-decoration: none;
outline-style: none;
text-shadow: 0px 0px 0px #000000;
filter: dropshadow(color=#000000, offx=0, offy=0);
}

ul#cssmw > li.current > a.current, ul#cssmw > li.current > a.current:link {
color: #003366;
font-weight:normal;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 {
left: 0;
top: 100%;
}
ul#cssmw ul.level-1 > li {
background-image: none;
}
ul#cssmw ul.level-1 > li > a, ul#cssmw ul.level-1 > li > a:link {
background-color:#003366;
background-image: none;
border-bottom: solid 1px #75828c;
border-right:none;
color: #99C0D9;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
margin:0;
padding: 7px 20px 7px 15px;
text-decoration: none;
outline-style: none;
-webkit-box-shadow: 0px 3px 5px #121112;
-moz-box-shadow: 0px 3px 5px #121112;
box-shadow: 0px 3px 5px #121112;
}
ul#cssmw ul.level-1 > li > a:active, ul#cssmw ul.level-1 > li > a:focus {
background-color: #003366;
color: #99c0d9;
font-weight: bold;
text-decoration: none;
outline-style: none;
}
ul#cssmw ul.level-1 > li:hover > a, ul#cssmw ul.level-1 > li:hover > a:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

ul#cssmw ul.level-1 > li.hover > a, ul#cssmw ul.level-1 > li.hover > a:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

ul#cssmw ul.level-1 > li.current > a.current, ul#cssmw ul.level-1 > li.current > a.current:link {
background-color: #75828c;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
outline-style: none;
}

Sign in to reply to this post

Jason ByrnesWebAssist

post a link where i can see the problem to investigate the cause.

Sign in to reply to this post

alistair316863

aiprocess/

This is a problem I seem to have with most of the menus created with dropdowns using CSS Menu Writer have a look at this one as well please index2.php

Sign in to reply to this post

Jason ByrnesWebAssist

one issue i see is that you have not specified a height or width for the menu items. the behavior you are describing is very common in IE7 when the height and width are not set, you should use a pixel measurement for the height and width of the menu levels for IE7 to work correctly.

Sign in to reply to this post

alistair316863

Tried that doesn't make any difference I am sure it has something to do with IE7 not recognising z-index but fixing it is another matter. Although it seems to me that its something to do with the containing div as when the mouse goes outside that div the menu goes:


<div id="menu-outer"><img src="img/menu.png" alt="menu-background" width="1024" height="60">
<div id="menu-inner">
<?php require_once("CSSMenuWriter/cssmw/menu.php"); ?>
</div>
<div id="searchbox">
<form name="form1" method="post" action="results.php">
<label>
<input name="ai-search" type="text" id="ai-search" onFocus="if(this.value==this.defaultValue) this.value='';" value="Search">
</label>
<label>
<input type="submit" name="Submit-Btn" id="Submit-Btn" value="GO">
</label>
</form>
</div>
</div>

Sign in to reply to this post

Mike Perry

Allistair -- did you find the problem? I looked using the IE7 mode in IE9 and I can see your dropdowns. . .

Sign in to reply to this post

alistair316863

HI Mike you can see them ok try going down one of the dropdows and you will see it dissapear

Sign in to reply to this post

Jason ByrnesWebAssist

I dont think this is the z-index issue, looking at the source of the menu css, there is still no height or width specified for the menu items, IE 7 does not work correctly if there is no height or width specified. For IE7, there must be a height and width set for the menu items.



for the z-index, you need to specify the position as well, each position has a separate stacking order, so when setting the stacking order using z-index, you need to specify which layer the z-index is to be applied to.

ul#cssmw {
cursor: default;
list-style-type: none;
margin:0;
padding:0;
z-index:5000;
position: relative;
}

Sign in to reply to this post

alistair316863

I bow down to you Jason, when I gave the menu a height and width I did it to the top level instead of the drop down level. So now I have given the height and width a value which didn't appear to work as the menu was behind everything, but I positioned the outer containing div as relative and gave it a z-index of 5 and the inner menu div as absolute and gave that a z-index of 10 and hey presto it works hallelujah.

Although can you have another look for me as the 1px border I have applied to the bottom of the drop down dosen't appear in ie7 so it replaces it with a gap which will close the menu if you hit it see: aiprocess/

Many thanks Jason I have gone totally grey over this but you have saved me from pulling the rest of my hair out regards Alistair

Sign in to reply to this post

alistair316863

Any chance of an answer Jason

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...