Solved

z-index for menu incorrect

Posted on 2011-02-19
8
879 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

747 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

10 Experts available now in Live!

Get 1:1 Help Now