"steve" <re********@hot mail.com> wrote in message
news:11******** *************@f 14g2000cwb.goog legroups.com...
Hi. New here.
I have a xhtml with two footers at the bottom. The style sheet has.
Footer1 is a div and a container for two more divs: #webmaster and
#links. #webmaster floats left and #links floats right. Both #webmaser
and #links has words written in the Div. The Z-index in footer1 is
200. Footer1 position is relative.
Footer2 is a div and a container for two more divs #plant1 and
#plant2. #plant1 is absolute postion bottom left and #plant2 is
absolute position bottom right. Footer2 has a Z-index of 100.
The plant in footer2 overlaps into footer1 which is what I want. Since
footer1 has a higher z-index I thought the words in #webmaster and
#links would be on top of the plant. Actually in Firefox this is the
case -- Firefox displays it the way I want.
However, I.E. it is a different story. Even though footer1 has a higher
z-index the words are below the plant. How do I get the the words to be
on top of the plant in I.E.? Any clue? I have searched the net and
found none.
thanks in advance for any help.
If you're sure the words in footer1 are below plant then something is wrong.
In the example below footer1 has a z index of 200 it's two divs are above
the divs in footer2 which has a z index of 100. I use IE6
See below:
Good Luck,
me
<html>
<head>
<title>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFF F">
<div id="footer1" style="position :absolute; width:200px; height:115px;
z-index:200">
<div id="webmaster" style="position :absolute; width:200px; height:115px;
z-index:1; left: 91px; top: 5px; background-color: #CCFFCC;
layer-background-color: #CCFFCC; border: 1px none #000000">webmas ter</div>
<div id="links" style="position :absolute; width:200px; height:115px;
z-index:2; top: 29px; left: 139px; background-color: #FFFFCC;
layer-background-color: #FFFFCC; border: 1px none #000000">links
</div>
</div>
<div id="footer2" style="position :absolute; width:200px; height:115px;
z-index:100; left: 25px; top: 62px">
<div id="plant1" style="position :absolute; width:200px; height:115px;
z-index:1; left: 27px; top: 4px; background-color: #CCCCFF;
layer-background-color: #CCCCFF; border: 1px none #000000">plant1 </div>
<div id="plant2" style="position :absolute; width:200px; height:115px;
z-index:2; background-color: #FFCCCC; layer-background-color: #FFCCCC;
border: 1px none #000000; top: 47px; left: -15px">
<p>plant2</p>
</div>
</div>
</body>
</html>
