IE 6 & 7 z-index & menu issues

[ikandee]

Hi.
I am building a website and looks perfect in all browswers except for IE 6 & 7... http://vncfoods.com.au.tmp.anchor.net.au/index.php

The things that are frustrating me are:

1. The drop down menu (on the main nav) is appearing slightly offset to the right in IE6 even though I've applied left:auto. I've narrowed it down to the applied widths on the top level <li></li>.... can anyone perhaps shed some light as to why and how to resolve this?

2. I've also been having issues with 'the good old' z-index in IE 6 & 7. The drop down menu was originally hiding behind #topContact, #socialMediaBar and .slider - but have resolved this by using z-index:99999; to the drop down menu and then z-index:-1; to #topContact, #socialMediaBar. The only problem is the links I have within these divs are now not working due to the negative z-index... again would really appreciate if anyone could help me out with this.

Thanks so much!

[ralph.m]

Hi ikandee. I'm not so good on the first point, but for point 2, the thing to do is set a high z-index on #mainNav. I think that should fix the problem of the menu hiding behind the topContact section. This is a problem with old versions of IE, where z-index has to be set on the parent element.

It's explained much better than I can express it here: http://www.sitepoint.com/forums/show...04&postcount=2

[Paul O'B]

Hi.
I am building a website and looks perfect in all browswers except for IE 6 & 7... http://vncfoods.com.au.tmp.anchor.net.au/index.php

The things that are frustrating me are:

1. The drop down menu (on the main nav) is appearing slightly offset to the right in IE6 even though I've applied left:auto. I've narrowed it down to the applied widths on the top level <li></li>.... can anyone perhaps shed some light as to why and how to resolve this?

IE6/7 don't really understand auto in the same way as other browsers and you need to tell them specifically where you want the dropdown to be. If you say left:auto and the parent element is text-align:center then auto will be at the center of that element (as seen in IE7 and under in your menu). If the parent was text-align:right then auto would be at the right of the element. Only when the parent is text-align:left will your menu appear in the right place.

Obviously this is no good for a solid foundation so instead you need to tell IE7 and under specifically where you want the menu to be placed and this is done by setting position:relative to the parent list of the immediate dropdown and then using left:0 for the dropdown itself instead of auto. This will ensure it is always in the right place.

2. I've also been having issues with 'the good old' z-index in IE 6 & 7. The drop down menu was originally hiding behind #topContact, #socialMediaBar and .slider - but have resolved this by using z-index:99999; to the drop down menu and then z-index:-1; to #topContact, #socialMediaBar. The only problem is the links I have within these divs are now not working due to the negative z-index... again would really appreciate if anyone could help me out with this.

Thanks so much!

As Ralph said you simply need to apply a higher z-index to the main parent of that menu (#head) and then it will automatically sit on top of the elements below that are at the same stacking level (#socialMediaBar). You should probably also apply position:relative and a high z-index to your header element to avoid any other issues outside that context.

[ikandee]

Thanks so much Ralph & Paul - your explanations helped a lot!