Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Possible z-index issue in ie7?

Posted on 2010-09-09
6
Medium Priority
?
486 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 43

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
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.

916 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