Solved

z-index IE 7

Posted on 2010-08-16
8
479 Views
Last Modified: 2012-05-10
Hi,

On my website I got a CSS drop down menu. in IE7 the dropdown from the menu is positioned behind the content of the website. Exactly like: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

How can I fix this, I tried the solution from the above URL, but I can't seem to fix it.

Thanks!

ul.nice-menu-down {
	margin-left: 9px;
  float: left;
  border: 0;
}

ul.nice-menu-down a{
	color: white;
	font-weight: bold;
}

ul.nice-menu-down a.active, ul.nice-menu-down a:active{
	color: white;
}

ul.nice-menu-down a:hover{
	text-decoration: none;
}

ul.nice-menu-down li {
	border-right: 1px solid #1b275e;
	width: 199px;
	height: 25px;
	padding: 6px 0px 6px 0px;
	text-align: center;
}

ul.nice-menu-down li.menu-path-contact {
	border: 0px;	
}

ul.nice-menu-down li li {
	border: 0px;
}

ul.nice-menu-down ul {
	background: #f4f4f4;
  font-weight: normal;
  top: 37px;
  left: 0px;
	right: 0px;
	width: 199px
}

ul.nice-menu-down ul li{

	text-align: left;	
	border-bottom: 1px;
	border-left: 1px;
	border-right: 1px; 
	border-style: solid;
	border-color: #CFCFCF; 	
	padding: 0;
	display:block;
	padding: 6px 0px 0px 25px;
	width: 173px;
	font-size: 11px;
  background: #f4f4f4 url("../images/arrow-right.png") 10px center no-repeat;	
}

ul.nice-menu-down ul li:hover{
	background-color: white;
}


ul.nice-menu-down ul li a{
	color: #006699;
  font-weight: normal;
}

ul.nice-menu-down ul li a.active{
	color: #006699;
  font-weight: normal;
}

ul.nice-menu-down ul li a:hover {
	color: #F07012 !important;
	text-decoration:underline;
  font-weight: normal;
}

ul.nice-menu-down li ul li ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li ul li ul {
  left: 12.5em;
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-right: 15px;
}

Open in new window


<div class="clear block block-nice_menus">
	<div class="content">
		<ul class="nice-menu nice-menu-down" id="nice-menu-1">
			<li id="menu-183" class="menu-path-home"><a href="home" title="" id="dhtml_menu-183">Home</a></li>
			<li id="menu-1293" class="menuparent menu-path-front"><a href="#">Services</a>
			<ul>
				<li id="menu-522" class="menu-path-node-140"><a href="publications" title="Publications" id="dhtml_menu-522">Publications</a></li>
				<li id="menu-523" class="menu-path-node-141"><a href="consultancy" title="Consultancy" id="dhtml_menu-523">Consultancy</a></li>
			</ul>
			</li>
			<li id="menu-1294" class="menuparent menu-path-front"><a href="#">Company</a>
			<ul>
				<li id="menu-528" class="menu-path-node-144"><a href="about-ecr" title="About ECR" id="dhtml_menu-528">About ECR</a></li>
				<li id="menu-529" class="menu-path-node-145"><a href="how-we-help" title="How we help" id="dhtml_menu-529">How we help</a></li>
				<li id="menu-530" class="menu-path-node-146"><a href="meet-team" title="Meet the team" id="dhtml_menu-530">Meet the team</a></li>
			</ul>
			</li>
			<li id="menu-997" class="menu-path-past-predictions"><a href="past-predictions" id="dhtml_menu-997">Past predictions</a></li>
		</ul>
	</div>
</div>

Open in new window

0
Comment
Question by:Dennie
  • 4
  • 3
8 Comments
 
LVL 28

Expert Comment

by:strickdd
ID: 33444870
0
 

Author Comment

by:Dennie
ID: 33444911
Please read my question before posting!
0
 
LVL 4

Accepted Solution

by:
Morrisproject earned 500 total points
ID: 33444944
ul.nice-menu-down ul li{
z-index:1000;}

ul.nice-menu-down ul {
z-index:3000;}

Add the two lines either to the existing CSS or the bottom.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Dennie
ID: 33444986
Doesn't work...
0
 

Author Comment

by:Dennie
ID: 33445239
found it:

ul.nice-menu-down ul li{
position: relative;
z-index:1000;}

#nav {
position: relative;
z-index:3000;}
0
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33445247
Can you show me the whole page? Do you have a link to it, and I will be able to assist quicker.

Thanks
0
 

Author Closing Comment

by:Dennie
ID: 33445249
Some points for your help
0
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33445409
Thanks glad you was able to resolve this
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question