Z-index and IE vs Firefox

Discussion in 'CSS' started by liza, Mar 24, 2005.

  1. #1
    Hi, hopefully someone has a solution to my problem. I'm new to CSS so it has been a learning experience. I provided code below hoping it may help. I have tried several forums and resarched until my fingers bleed but no solution.

    I have a #footer1 which is wrapper for #webmaster and #links. I have words in both #webmaster and #links.

    In #footer2 I have a picture of a plant as a background image. The plant overlaps into footer 1 which is what I want. I also want the words in footer 1 to be on top of the plant in footer 1.

    I set the z-index in footer1 to 200 so it stacked higher than than footer 2 which has a z-index of 100.

    Everything is perfect in Firefox. However, in I.E. the words in footer 1 are not ontop of the plant in footer 2 even though footer 1 has a higher z-index.

    Like I said it works great in Firefox. Can anyone tell me how to get the same effect in I.E.

    You can take a peek at http://www.filipinaeyes.com/indexnew.htm (don't laugh, I'm new at this stuff...look at it with firefox and you will see what I want..the plants are at the bottom left and right).

    Thanks for your help in advance.
    Steve

    #footer1 {position:relative; clear: both;
    line-height: 1.5em;
    z-index: 200;}

    #webmaster{float:left; width:47%;
    font-size: 12px;
    font-weight: bold;}


    #links{float:right; width:47%;
    font-size: 12px;
    font-weight: bold;}


    /*The start of footer 2*/

    #footer2{clear: both;
    margin-left: 203px;
    margin-right: 203px;
    }

    #footer2 h2 {margin: 0em;
    padding: 0em;
    background-image: url(imagesnew/plant2.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 200px;
    height: 264px;
    position: absolute;
    right: 0em;
    bottom: 0em;
    z-index: 100;
    clear: both;}

    #footer2 h3 {margin: 0em;
    padding: 0em;
    background-image: url(imagesnew/plant3.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 200px;
    height: 264px;
    position: absolute;
    left: 0em;
    bottom: 0em;
    z-index: 100;
    clear: both;}
     
    liza, Mar 24, 2005 IP
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You use z-index on non-positioned elements (e.g. the Webmaster Stuff div has z-index: 200). According to the CSS spec, z-index only applies to positioned elements (i.e. those whose position property has a value other than static).

    J.D.
     
    J.D., Mar 25, 2005 IP
  3. liza

    liza Active Member

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    footer 1 has a postion of relative and footer 2's h2 and h3 childs have absolute positioning....so they are not static, right? Footer one is a container div that has both the webmaster div and link div inside. Since footer1 has a position of relative, doesn't webmaster and link div also?

    My research shows that you can use both relative or absolute positioning for z-index.
     
    liza, Mar 25, 2005 IP
  4. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I used FF's DOM inspector tool and it shows that the div I mentioned has z-index 200 and a static computed position.

    J.D.
     
    J.D., Mar 25, 2005 IP
  5. liza

    liza Active Member

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #5
    Thanks JD...I figured it out....you gave me the key and I was able to experiment and get it to work. Thanks again for your time.

    Liza.
     
    liza, Mar 25, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    So, what was the problem?

    J.D.
     
    J.D., Mar 25, 2005 IP
  7. liza

    liza Active Member

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #7
    You were right, JD. I assumed because both webmaster and link div was wrapped in a container called footer div that they would inherit the relative postion I put in footer div. Not the case. I had to put relative postion in the two childs -- webmaster and link div -- for it to work.

    Thanks again

    liza
     
    liza, Mar 26, 2005 IP
  8. yangyang

    yangyang Banned

    Messages:
    757
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    0
    #8
    yangyang, Jan 1, 2009 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    You bumped a four year old thread to pimp your site? Sheesh!

    gary
     
    kk5st, Jan 2, 2009 IP
    deathshadow likes this.