I've not heard folks run into this problem (much) before. You seem to be on the right track by setting the z-index. Have you tried setting it on .MainMenu itself (not just its inner <ul> tags)? Sometimes it is better if you can float your content rather
than positioning it absolutely or relatively if you have struggling with z-index ordering problems. Just a thought... it works sometimes... in some layouts.
If you can't get past this problem, it would help to have a simplified way to test it. Can you post some simple markup and CSS rules to repro it?
Now that I know what was causing the problem, I've changed how I have positioned the menu ... floating it instead. I've only been working with CSS positioning the past couple of months so i'm still learning a lot.
Now that I know what was causing the problem, I've changed how I have positioned the menu ... floating it instead. I've only been working with CSS positioning the past couple of months so i'm still learning a lot.
Has a resolution been found for this? I am experiencing this issue with the most recent version. Specifically, it only happens over my virtual earth map which is relatively positioned and Infragistics grids which have absolutely positioned table inside
of the grid frame.
My menu is positioned regularly, ie no float, relative, absolute...
I would like to try to help with this but I'm going to warn you up front: this can be a difficult problem for people to fix because figuring out the right CSS rules to create or modify can be a bit tricky. I'm going to describe a recipe that you can use
in these situations. Give it a shot. If you get lost you can post your markup and your existing CSS and I'll try to work it out for you. First though... here is the recipe for you to try on your own...
If I understand correctly, you an <asp:Menu> that is being adapted so it renders a bunch of nest <ul> tags. When you hover over menu items, submenus appear. Sometimes you find that those submenus aren't always topmost relative to other content on your
page.
In most of these cases, your DOM will look something like this:
<div id="a1">
<div id="a2">
<div id="a3">
<asp:menu ... />
</div>
</div>
</div>
<div id="b1">
<div id="b2">
<div id="b3">
<div id="b4">
some content that overlaps your submenu produced by the asp:menu above
</div>
</div>
</div>
</div>
Your exact DOM structure will, of course, vary in detail. You need to sketch out your DOM so you can locate the two sibling elements (a1 and b1) that each contain (ultimately) the menu and the content that is improperly overlapping the menu. Remember,
you are looking for siblings. They have to be at the same level in the DOM to be siblings. For example, b4 isn't a sibling to a1, a2, etc. The only siblings in the a/b groups are a1 and b1.
OK, when you have located YOUR version of the a1 and b1 elements you need to look at the CSS rules that apply to those elements specifically.
Often, the overlap problem occurs because the CSS governing b1 says that it should use position:relative or position:absolute whilst the CSS governing a1 uses neither position:relative or position:absolute. In that case, in IE at least, you'll find that
the content within b1 sits atop the content that originates from a1 but overlaps it.
If this is your situation then you need to add position:relative to a CSS rule whose selector selects the a1 element.
You may also find that you need to add a specific z-index value to your CSS rule for the a1 element. Try something like z-index:300 on the a1 rule. You may need a higher value if you have a z-index that is higher and is already set for the b1 element.
If b1 isn't position:relative or position:absolute then you may simply need to add a z-index to the a1 rule that is higher then the z-index in the b1 rule. You won't, in that case, need to make a1 use position:relative.
Let me know if I've lost you on this. It's confusing stuff for everyone in the CSS community, I think. The point is that you have to really look at the overall DOM and how the elements relate to one another. When you are comparing z-index values you need
to look at siblings. Cousins don't matter in IE! And you need to consider whether one sibling is position:relative or absolute but the other isn't. Elements that are position:relative or absolute sit atop their siblings who are neither relative or absolute....
at least, that's what I think is true in IE. Ha ha.
I'm confident that we can help you solve this problem. I've run into it myself in my own designs countless times. It just takes time to figure our the DOM relatiionships and look at the CSS that impacts the siblings. Good luck and stay in touch.
I remembered removing the position: relative; attribute from my css for the menu because I didnt need it. I had the position correct using margins. By adding in position: relative; left: 0; top: 0; all of my issues disappeared.
mikeg79
Member
25 Points
5 Posts
Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 13, 2006 06:57 PM|LINK
I'm having problems with my menu displaying behind any absolute and relative positioned elements in IE.
I solved the problem in Firefox by setting z-index to 1000 for ".MainMenu ul.AspNet-Menu, .MainMenu ul.AspNet-Menu ul".
Has anyone else come across this problem? Is there a fix?
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 13, 2006 09:54 PM|LINK
Hi Mike,
I've not heard folks run into this problem (much) before. You seem to be on the right track by setting the z-index. Have you tried setting it on .MainMenu itself (not just its inner <ul> tags)? Sometimes it is better if you can float your content rather than positioning it absolutely or relatively if you have struggling with z-index ordering problems. Just a thought... it works sometimes... in some layouts.
If you can't get past this problem, it would help to have a simplified way to test it. Can you post some simple markup and CSS rules to repro it?
Groovybits.com
mikeg79
Member
25 Points
5 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 14, 2006 09:16 PM|LINK
Hi Russ,
I've been working with this issue and figured that that setting a relative postion on the menu itself was what was causing this to happen.
Here's some code that you can add to SimpleMenu.aspx in the CSS Friendly Website Template:
Add this at line #42:
<div id="box1" >Box1 - position: absolute</div>
<div id="box2" >Box2 - position: relative</div>
and Add this style to the page:
<style type="text/css">
.SimpleEntertainmentMenu {
position: relative;
}
#box1{
position: absolute;
left: 175px;
top: 50px;
background-color: #BBBBBB;
width: 160px;
height: 50px;
}
#box2{
position: relative;
left: 5px;
top: 5px;
background-color: #DDDDDD;
width: 150px;
height: 50px;
}
</style>
Now that I know what was causing the problem, I've changed how I have positioned the menu ... floating it instead. I've only been working with CSS positioning the past couple of months so i'm still learning a lot.
Thanks for your help!
Mike
mikeg79
Member
25 Points
5 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 14, 2006 09:16 PM|LINK
Hi Russ,
I've been working with this issue and figured that that setting a relative postion on the menu itself was what was causing this to happen.
Here's some code that you can add to SimpleMenu.aspx in the CSS Friendly Website Template:
Add this at line #42:
<div id="box1" >Box1 - position: absolute</div>
<div id="box2" >Box2 - position: relative</div>
and Add this style to the page:
<style type="text/css">
.SimpleEntertainmentMenu {
position: relative;
}
#box1{
position: absolute;
left: 175px;
top: 50px;
background-color: #BBBBBB;
width: 160px;
height: 50px;
}
#box2{
position: relative;
left: 5px;
top: 5px;
background-color: #DDDDDD;
width: 150px;
height: 50px;
}
</style>
Now that I know what was causing the problem, I've changed how I have positioned the menu ... floating it instead. I've only been working with CSS positioning the past couple of months so i'm still learning a lot.
Thanks for your help!
Mike
michael_balt...
Member
45 Points
9 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 20, 2006 06:52 PM|LINK
Has a resolution been found for this? I am experiencing this issue with the most recent version. Specifically, it only happens over my virtual earth map which is relatively positioned and Infragistics grids which have absolutely positioned table inside of the grid frame.
My menu is positioned regularly, ie no float, relative, absolute...
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 20, 2006 11:51 PM|LINK
Hi Michael,
I would like to try to help with this but I'm going to warn you up front: this can be a difficult problem for people to fix because figuring out the right CSS rules to create or modify can be a bit tricky. I'm going to describe a recipe that you can use in these situations. Give it a shot. If you get lost you can post your markup and your existing CSS and I'll try to work it out for you. First though... here is the recipe for you to try on your own...
If I understand correctly, you an <asp:Menu> that is being adapted so it renders a bunch of nest <ul> tags. When you hover over menu items, submenus appear. Sometimes you find that those submenus aren't always topmost relative to other content on your page.
In most of these cases, your DOM will look something like this:
<div id="a1">
<div id="a2">
<div id="a3">
<asp:menu ... />
</div>
</div>
</div>
<div id="b1">
<div id="b2">
<div id="b3">
<div id="b4">
some content that overlaps your submenu produced by the asp:menu above
</div>
</div>
</div>
</div>
Your exact DOM structure will, of course, vary in detail. You need to sketch out your DOM so you can locate the two sibling elements (a1 and b1) that each contain (ultimately) the menu and the content that is improperly overlapping the menu. Remember, you are looking for siblings. They have to be at the same level in the DOM to be siblings. For example, b4 isn't a sibling to a1, a2, etc. The only siblings in the a/b groups are a1 and b1.
OK, when you have located YOUR version of the a1 and b1 elements you need to look at the CSS rules that apply to those elements specifically.
Often, the overlap problem occurs because the CSS governing b1 says that it should use position:relative or position:absolute whilst the CSS governing a1 uses neither position:relative or position:absolute. In that case, in IE at least, you'll find that the content within b1 sits atop the content that originates from a1 but overlaps it.
If this is your situation then you need to add position:relative to a CSS rule whose selector selects the a1 element.
You may also find that you need to add a specific z-index value to your CSS rule for the a1 element. Try something like z-index:300 on the a1 rule. You may need a higher value if you have a z-index that is higher and is already set for the b1 element.
If b1 isn't position:relative or position:absolute then you may simply need to add a z-index to the a1 rule that is higher then the z-index in the b1 rule. You won't, in that case, need to make a1 use position:relative.
Let me know if I've lost you on this. It's confusing stuff for everyone in the CSS community, I think. The point is that you have to really look at the overall DOM and how the elements relate to one another. When you are comparing z-index values you need to look at siblings. Cousins don't matter in IE! And you need to consider whether one sibling is position:relative or absolute but the other isn't. Elements that are position:relative or absolute sit atop their siblings who are neither relative or absolute.... at least, that's what I think is true in IE. Ha ha.
I'm confident that we can help you solve this problem. I've run into it myself in my own designs countless times. It just takes time to figure our the DOM relatiionships and look at the CSS that impacts the siblings. Good luck and stay in touch.
Groovybits.com
michael_balt...
Member
45 Points
9 Posts
Re: Menu Overlay Issue with Absolute and Relative positioned elements only in IE.
Sep 21, 2006 02:06 PM|LINK
I remembered removing the position: relative; attribute from my css for the menu because I didnt need it. I had the position correct using margins. By adding in position: relative; left: 0; top: 0; all of my issues disappeared.