Solved

z-index for menu incorrect

Posted on 2011-02-19
8
880 Views
Last Modified: 2012-05-11
The secondary menu for this site is behind the opt-in box. I have added z-index:999; to just about everything I can find, but to no avail.

Go here:
http://www.discovermakeupsecrets.com/home/

Mouse-over products, and you'll see that the menu dips behind the opt-in. However, if you go down to skin care, you'll see the secondary menu is above the opt-in.

How do I fix this? All the menus should be above everything at all times...
0
Comment
Question by:DrDamnit
  • 4
  • 3
8 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34935763
Setting z-index:999 on #menu li ul works
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34935764
Hi There is no problem of z-index in your CSS You have to change the relative position of deserve div like below:

#deserve {
    background-image: url("/images/bg-form.png");
    border-color: red;
    border-style: solid;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

Open in new window


When you change the rest of the part will be out of the box write css style for them because they are inherited from h1 and others
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 34938023
jagadishdulal:

Removing the position:relative from #deserve fixes the menus, but causes all the other text that is position:absolute to go to the top left.

See attachments below.

Please advise.
 Before after
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34939923
Yes that's true and you need to write code for the rest of the part.
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.

 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 34939987
I am trying to help you a little more there a copy div which have absolute position remove that and just watch my style which I am showing you. You need edit yourself it for the best result.

#copy{
	width:600px;
	margin:10px 5px;
}
#copy h1 {
	color:red;
	font-size:36pt;
	left:115px;
	top:20px;
}

#copy h2 {
	font-size:14pt;
	top:55px;
	left:125px;
}
#copy h3 {
	font-size:18pt;
	top:85px;
	left:140px;
}

#copy h3 img {
	vertical-align:middle;
}

#copy form {
	width:450px;
	top:125px;
	left:150px;
}

#copy form input {
	font-size:18pt;
}


#copy form p {
	text-align:left;
}

#copy form p label {
	font-size:18pt;
}

#submit-button input {
	left:70px;
}

Open in new window

0
 
LVL 32

Author Comment

by:DrDamnit
ID: 34950989
OK. Removed the position absolute as you said, and that fixed it in Firefox and Chrome. Now IE is broken in a different way.
See attachment.

Since I am working on a dev server that you guys can't see, I have attached the page.html and current style.css below.

Screenshot
 page.html

 style.css
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 35175629
bump
0
 
LVL 32

Author Closing Comment

by:DrDamnit
ID: 35237367
Works in everything but IE, which unfortunately had 90% of the browser share... So it needs work.
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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

18 Experts available now in Live!

Get 1:1 Help Now