SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE, Z-Index & Googlemaps??

    I am using cssplays Drop Down and am having problems in IE7 and it not dropping in-front of a google map.

    Its dropping behind making it un-useable.

    I have sorted it in FF and Safari with z-index however, no in good in IE7 its still dropping behind the map.

    Any ideas or help?

    Does IE7 have problems with z-index and googlemaps?

    Many thanks

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE can have troubles getting the stacking right, you could try e.g. 1000 for z-index on the navbar:

    Code CSS:
    #navBar {
        position: relative;
        z-index: 1000;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    For IE it's the positioned parent that creates a new stacking context so just ensure the parents of each elements have their z-indexes defined correctly.

    e.g.
    Code:
    div#navBar{
    width:78.6em; 
    height:3em; 
    background-color:#999; 
    float:left; 
    position:relative;
    z-index:99;
    }
    div#contentLeft{
    float:left; 
    width:534px; 
    margin-top:25px;
    position:relative;
    z-index:1;
    }
    Edit:


    I see erik beat me to the punch

    However, the second part of my code is still needed before it will work .
    Code:
     div#contentLeft{position:relative;z-index:1;}

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I see erik beat me to the punch
    You beat me on the punch in this thread.
    Mystifying block display behaviour in Firefox

    However, the second part of my code is still needed before it will work .
    Code:
     div#contentLeft{position:relative;z-index:1;}
    The 1000 high level z-index was meant to override any after coming auto z-index sibling. But defining the after coming block's stacking level lower must be safer I think.
    Happy ADD/ADHD with Asperger's

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    But defining the after coming block's stacking level lower must be safer I think
    Theoretically your answer was correct but IE doesn't actually work unless you also set a stacking context on #contentLeft by adding position:relative. The z-index of 1 on #contentLeft is actually irrelevant because IE will make it zero by default for positioned elements (when in fact it should be auto).

    Off Topic:


    Nice to see you back erik

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou guys, i shall give it a go using your suggestions.

    Many thanks


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
  •