Z-Index Issue with IE in compatibility mode
2,471 views
Skip to first unread message
JonathanM
Sep 21, 2012, 5:03:54 PM9/21/12
to node...@googlegroups.com
Hello,
I have an issue that's driving me crazy... in IE 8 or 9 (compatibility view only) my menu is appearing behind the promo area on my page. The promo area has a z-index of 1 and the div containing the menu has z-index of 100. Everything works as it should in Safari, Firefox, Chrome and IE 8 and 9 (not in compatibility view).
Here's the page http://1079thelink.com/new/index.aspx
I'm using Visual NodeFire (v1.2.1)
Any ideas?
Thanks,
Jonathan
Jesse (support)
Sep 21, 2012, 5:15:00 PM9/21/12
to node...@googlegroups.com
Hi,
Try wrapping the menu in a position relative div with a high z-index...
<div style="position:relative;z-index:99999999;">
...your menu here...
</div>
Let me know if that doesn't do the trick and I'll take another look.
-Jesse
Try wrapping the menu in a position relative div with a high z-index...
<div style="position:relative;z-index:99999999;">
...your menu here...
</div>
Let me know if that doesn't do the trick and I'll take another look.
-Jesse
JonathanM
Sep 24, 2012, 9:14:17 AM9/24/12
to node...@googlegroups.com
Hi Jesse,
I tried adding those two style attributes and it had no effect. I'd appreciate any insight you can offer... I was using OpenCube from years ago and the same issue popped up, so I thought I'd try NodeFire to see if it corrected the problem. Again, only happens in compatibility view in IE.
Thanks,
Jonathan
Jesse (support)
Sep 24, 2012, 2:44:11 PM9/24/12
to node...@googlegroups.com
Hi,
It's not an issue with the software, instead its an issue with z-indexes in IE under compatibility mode / ie7, they are treated a bit different sometimes depending on the order of your elements in the page. I forget the exact quirk with it off the top of my head, but I think it's maybe a nesting issue, where nested elements with a high z-index are not shown correctly over elements higher in the DOM with no z-index (something like that anyway).
I took your page down and made the menu position absolute and put it directly under the Body tag just to make sure it wasn't a menu issue and it did work correctly, like this...
<body>
<div style="position:absolute;top:220px;left:10px;z-index:999;">
<!--[START-LX0]--><script type="text/javascript" src="fix_files/nodefire_linknav7.js"></script><!--[END-LX0]-->
</div>
You can try to use the position absolute option or you should be able to get it to work where it sits now, but you will need to play around with the other elements z-indexes.
It's not an issue with the software, instead its an issue with z-indexes in IE under compatibility mode / ie7, they are treated a bit different sometimes depending on the order of your elements in the page. I forget the exact quirk with it off the top of my head, but I think it's maybe a nesting issue, where nested elements with a high z-index are not shown correctly over elements higher in the DOM with no z-index (something like that anyway).
I took your page down and made the menu position absolute and put it directly under the Body tag just to make sure it wasn't a menu issue and it did work correctly, like this...
<body>
<div style="position:absolute;top:220px;left:10px;z-index:999;">
<!--[START-LX0]--><script type="text/javascript" src="fix_files/nodefire_linknav7.js"></script><!--[END-LX0]-->
</div>
You can try to use the position absolute option or you should be able to get it to work where it sits now, but you will need to play around with the other elements z-indexes.
JonathanM
Sep 24, 2012, 3:28:20 PM9/24/12
to node...@googlegroups.com
Thanks Jesse... I'll keep trying on the z-index or move the menu out as you suggested and make it absolute.
Thanks,
Jonathan
jay e
Dec 5, 2013, 2:10:08 PM12/5/13
to node...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages