Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Possible z-index issue in ie7?

Posted on 2010-09-09
6
Medium Priority
?
484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

688 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