SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Help to fix IE7 bug (stacking order)

    I am trying to fix this IE7 bug (can be viewed in IE8 compatibility mode too) :
    http://www.glennrobertson.ca/en/products/bedroom.php

    On hover, my CSS sub-menu appears behind other page elements below.
    For example, Products sub-menu is behind the title and thumbnails.

    My guess it has to do with the stacking order: tried to fix it by adding z-index and zoom properties to sub-menu UL, but it didn't solve the IE7 problem.
    Everything works fine in other modern browsers (IE8, FF3, Safari, Opera, Chrome).

    Any insight from CSS gurus would be appreciated.

  2. #2
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Z-index is just what you need. Place z-index:2 on ul#main-nav to fix it.

  3. #3
    SitePoint Member
    Join Date
    Oct 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's right!
    IE7 was cured by adding z-index added to the parent UL menu list. (My error was that I was trying to add it only to children sub-menu lists)
    Thank you very much, David.

  4. #4
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome.
    In case you were wondering, z-index is a kinda tricky subject, but in short, if it's not an image, then it needs to have a position:[value] on the element for it to work. Google if you want to find out more.


Tags for this Thread

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
  •