SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Location
    Sydney Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown menu z-index & IE7

    I am building a new site (with Joomla). It has a dropdown (Suckerfish) menu. This works fine with firefox, and on all pages but the home page looks fine with IE7. Initially on the home page with IE the drop down would dissappear behind the carousel below it. To remedy that I added

    Code CSS:
    div.slideshow {
    	position:relative;
    z-index:-1;
    }

    This solved the drop down problem but now you cannot use the links on the slides.

    I have tried putting the z-index on various other divs but this either results in all the content below the header dissapearing or links not being clickable . You can see the test site here


    http://www.biencreative.com.au/testarea/AusTechnion/

    [Only the students menu item has drop down. ]

    Any suggestions appreciated.
    biencreative.com.au

    Web Design for Small Business on Sydney's North Shore

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Rather than the z-index method you used, try this:

    Code:
    #bc-headerwrap {
      position: relative;
      z-index: 20;
    }
    this fixes a z-index problem with IE 7 and under.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    May 2009
    Location
    Sydney Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it worked.

    trying to work out why....

    You give the surrounding div a higher z-index (20) then that its going to drop down over (none) even though the drop down already had a z-index of 99

    This works, while giving the div to be dropped over a negative z-index just hid it .

    so.. it is better to increase a z-index than give something else a negative one?
    biencreative.com.au

    Web Design for Small Business on Sydney's North Shore

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    The default z-index value for positioned elements is auto, except for IE where the z-index defaults to 0, so using negative z-indexes isn't a safe method to use.

    As a consequence of how IE treats z-index, the children of a containing block's element are positioned behind its parent, thus making it invisible in IE.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    A nice explanation of this is offered by Paul O'Brien, if you want more details:

    http://www.sitepoint.com/forums/showthread.php?t=592134
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •