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?
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.
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.
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.
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.