No replies
steveeyes
Offline
newbie
Last seen: 17 years 23 weeks ago
Joined: 2005-02-27
Posts: 2
Points: 0

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