Solved

z-index IE 7

Posted on 2010-08-16
8
474 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
 

Author Comment

by:Dennie
ID: 33444986
Doesn't work...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create html table using xsl 8 28
AngularJS Page Control Understanding 5 38
CSS z-index issue 3 19
move widget title down 4 6
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now