Z-index and IE vs Firefox

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

 

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.

 

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.

 

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.

 

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.

 

So, what was the problem?

J.D.

 

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

 

Take a peek at this post: http://www.kavoir.com/2008/12/css-z-index-doesnt-work.html

z-index only works on elements that have position:relative or position:absolute. For an experimental learning resource, you can further your understanding of how z-index works at here: http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

 

You bumped a four year old thread to pimp your site? Sheesh!

gary