Solved

Possible z-index issue in ie7?

Posted on 2010-09-09
6
473 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 43

Expert Comment

by:Rob
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

808 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