Solved

z-index IE 7

Posted on 2010-08-16
8
478 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 37
paypal ipn url 5 58
Box Locations 6 16
Call a function within the ASP code 4 12
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

821 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