?
Solved

z-index for menu incorrect

Posted on 2011-02-19
8
Medium Priority
?
885 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 1500 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month13 days, 21 hours left to enroll

800 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