Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 888
  • Last Modified:

z-index for menu incorrect

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
DrDamnit
Asked:
DrDamnit
  • 4
  • 3
1 Solution
 
Sudaraka WijesingheWeb Application ProgrammerCommented:
Setting z-index:999 on #menu li ul works
0
 
Jagadishwor DulalBraces MediaCommented:
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
 
DrDamnitAuthor Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Jagadishwor DulalBraces MediaCommented:
Yes that's true and you need to write code for the rest of the part.
0
 
Jagadishwor DulalBraces MediaCommented:
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
 
DrDamnitAuthor Commented:
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
 
DrDamnitAuthor Commented:
bump
0
 
DrDamnitAuthor Commented:
Works in everything but IE, which unfortunately had 90% of the browser share... So it needs work.
0

Featured Post

Technology Partners: 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!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now