1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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;}
    SEMrush

    /*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
    SEMrush
  2. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    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:
    64
    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:
    64
    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,487
    Likes Received:
    368
    Best Answers:
    28
    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.