Possible z-index issue in ie7?

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-
ndekAsked:
Who is Participating?
 
ndekConnect With a Mentor Author Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
David S.Commented:
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
qwerty021600Commented:
share the link ..
0
 
mreuringCommented:
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
 
ndekAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.