Solved

z-index IE 7

Posted on 2010-08-16
8
480 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap wrap text 1 30
Send form to asp server side 6 26
Can't get cursor to change 3 15
Read text on Table 7 25
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

679 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