Hi, Liza or anyone. 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;}

i think its because you have no top and left in your footer1. You do have position: relative; but after that you should also have top: #; left: #;

Love,
Mirna

thanks for the input, but that didn't work. any other suggestions.

didn't worked as in doesn't show up or what?
you still need those codes, even if it doesn't solve the problem... but they are needed

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

that's what is in the css file... there's no top and left :)
if you deleted it, place it back... otherwise we can't help you :)

Love,
mirna

What I meant was, put top or left didn't make a difference. Same problem as I explained above, the words are below the plant in I.E. but in firefox is displays correctly.

Sorry, made the changes locally and didn't upload. They are now uploaded.

Maybe I can convince the world to use firefox instead of i.e. :)

Any other suggestions.

Thanks for tyring to help.

steve

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

z-index is always linked with position: relative; or position: absolute;
you are not having that, so the z-index isn't working :)

so either insert:

position: relative; top: #; left: #;

or

position: absolute; top: #; left: #;

delete the z-index out of the link css ... it has no point setting a z-index for all the links, since they are in the div "links" already so the div needs the z-index.

same story for this:

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

#links h3{
font-weight: bold;
text-decoration: underline;
text-align: center;
z-index: 200;}

however in example above you only need to z-index #links and not #links h3, since h3 is within the #links area .. so it automatically takes the settings of that aswell :)

and same goes for webmaster area aswell.. try fixing that first for all of the area's. Only set z-indexes for area's, not links or headers (unless they are positioned somewhere else on the screen, but if they don't need position, then they can't use z-index)

and yes: i'm not saying that will SOLVE the problem, but it's a start. Often problems are caused by many things, and it takes time to find all those things and fix them :) (upload it aswell, so we can help you after that)

Love,
Mirna

p.s: i knew it wouldn't solve the problem at first... but if you have 5 errors for example, and fix one but it doesn't SOLVE the problem that doesn't mean it cannot be solved. Nope you need those other 4 errors to be solved aswell .. and that takes time .. ;)

Wow....your great for responding so quickly. If it isn't obvious, I must point out I'm a rookie at this. So if I make a mistake in trying to follow your suggestions I didn't mean to. Let me summarize what I did and hopefully it will indicate if I did what you suggested.

1. First in footer 1 I now have a z-index of 200 with a relative postion of top 1px and left 1px. I got rid of the z-index in all the childs of footer1. So now only footer one has the z-index in it.

2. Footer2 now has the z-index of 100 in it. I took it out of #footer2 h2 and #footer2 h3.

So far every still looks great in firefox and still having the same problem in I.E.

3. Your next suggestion gave me problems with my plants. I think you suggested I put relative postion in footer2 with a top and left postion. I did that with a 1px top and left. It move both plants to the center. I took it back out since I wanted the plants to hug the left and right border. If you want me to put it back in so it moves to the center let me know.

Before I took out the relative postion from footer2, I did check in I.E to see if the words were on top of the plants and they were not...so even with the relative position in footer2 I had the same problem.

Again, thanks for your time. I must say again, you are the only one who has attempted to help. Other forums didn't respond. Maybe it was too much of a challenge, I don't know. So your response and patience in this matter is greatly appreciated.

steve

This is an edited version of the post above.

Wow....your great for responding so quickly. If it isn't obvious, I must point out I'm a rookie at this. So if I make a mistake in trying to follow your suggestions I didn't mean to. Let me summarize what I did and hopefully it will indicate if I did what you suggested.

1. First in footer 1 I now have a z-index of 200 with a relative postion of top 1px and left 1px. I got rid of the z-index in all the childs of footer1. So now only footer one has the z-index in it.

2. Footer2 now has the z-index of 100 in it. I took it out of #footer2 h2 and #footer2 h3.

So far every still looks great in firefox and still having the same problem in I.E.

3. Your next suggestion gave me problems with my plants. I think you suggested I put relative postion in footer2 with a top and left postion. I did that with a 1px top and left. It moved both plants to the center in firefox. I took it back out since I wanted the plants to hug the left and right border. If you want me to put it back in so it moves to the center let me know.

Before I took out the relative postion from footer2, I did check in I.E and the plants disapeared when viewed in i.e.....in firefox the plants moved to the center (I hope I did this right, Iwanted to edit my post above but couldn't find the edit button.).


Again, thanks for your time. I must say again, you are the only one who has attempted to help. Other forums didn't respond. Maybe it was too much of a challenge, I don't know. So your response and patience in this matter is greatly appreciated.

steve

Far easier, in my opinion, than using the z-index to stack text on an image, just make the image a background of a div and put the text inside that div.

Anyhow, the z-index isn't supposed to be used with relative positioning. This may be causing your problems in IE. Use absolute.

Far easier, in my opinion, than using the z-index to stack text on an image, just make the image a background of a div and put the text inside that div.

Anyhow, the z-index isn't supposed to be used with relative positioning. This may be causing your problems in IE. Use absolute.



It is a background image....look at the code. Doing what you suggeted is correct, but you are not getting what I'm trying to do. I'll explain again.

(1) Footer 1 has the words.....which uses 2 divs that float right and left to make two columns. If I put the plant as a back ground image here, it will not overlap from one element to the other.

(2) To get the right effect, I had to put the plant in footer 2 so it overlapped into footer 1.

Your statement about z-index and relative position is simply wrong. It can be used with z-index.

I guess Mirna decided to abandon me.

Anyways, got it to work. Put relative postion as part of the float was the key. Not absolute...relative.

Thanks though.

steve