Solved

z-index for menu incorrect

Posted on 2011-02-19
8
882 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
WordPress Themes 10 41
two div layout one vertical other horizontal. 5 25
Changing way home page shows 2 30
Under active page on navigation bar 8 12
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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…

776 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