Solved

Possible z-index issue in ie7?

Posted on 2010-09-09
6
468 Views
Last Modified: 2012-05-10
I have a regular drop-down menu that when it activates, it stacks properly visually, so I think I have the z-indexing correct.  However when you start to mouse over the links in the drop-down, as soon as you get to a point where the drop-down is overlapping content underneath, the menu recoils.  It doesn't matter if the content below is an a:link or just text in a p tag.

On the flip side when I place just text in p tags in the drop-down container at the areas where content overlaps, there are no issues.

This is only an issue in IE7 (and lower? I'm not testing for IE6). IE8, FF etc. work properly.

Could this still be a z-indexing issue even though it displays properly?  

I don't have a link to provide right now as I'm still working on this locally, but just tossing this out there to see if it rings any bells with anyone, to see if I'm missing anything easy/obvious.  (I realize I may not get much help until I can provide code)

Thanks-
0
Comment
Question by:ndek
6 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 33643426
Does this apply to your case?

http://www.w3schools.com/Css/pr_pos_z-index.asp

it states "Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)."
0
 
LVL 42

Expert Comment

by:David S.
ID: 33643451
Yes, I've seen that issue before. If I remember correctly, I've solved it in the past by giving position:relative and a highish z-index to an ancestor of the menu.
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 33643919
share the link ..
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 17

Expert Comment

by:mreuring
ID: 33646011
Quite possibly your elements in IE7 need to have 'hasLayout' it sounds ridiculous, but often applying 'zoom: 1;' will solve issue that only exist in IE. Similar approaches include giving it position: relative, or width/height values. Using zoom is often more convenient since the only 'effect' it has is giving the element 'hasLayout' without any other side-effects.

Hope this helps, although I wonder if this issue was perhaps solved but not awarded?
0
 

Author Comment

by:ndek
ID: 33647799
I'm out of the office this AM, haven't had a chance to get back to the project.  All the elements that I have z-index assigned to do have a position (relative or absolute) assigned to them, and I've also tried the hasLayout zoom: 1/ height: 1% fixes, but will readdress this and try assigning a higher z-index to the parent per Kravimir's suggestion.
0
 

Accepted Solution

by:
ndek earned 0 total points
ID: 33675754
Sorry for the delay it took a bit to resolve this, but it was more of an iehover issue, where the content below the dropdown was conflicting with the dropdown even though the drop-down was appearing on top?  I added an iframe to it via jquery and that seemed to resolve it.

I had heard of this issue with input fields etc, but for what ever reason this resolved my issue as well.

Thanks for everyone's input.
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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

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

23 Experts available now in Live!

Get 1:1 Help Now