SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 & 7 z-index & menu issues

    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!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ikandee View Post
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much Ralph & Paul - your explanations helped a lot!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •