Posted by HJ on 08/29/06 15:09

Thanks for the reply. The idea is to have a html file that can be used
by 2 kinds of users. One can only see the block, one can actually click
on the links.

So for the first kind of user, I want to have a transparent image to
cover the html block.

The following is the code I got now.
//*******************************************************

<style type="text/css">
#inner{
background-image: url("../images2/misc/clear.gif");
z-index: 1;
width:100px;
border:1px solid #ddd;
}

#inner2{
z-index: -1;
position:relative;
width:400px;
}
</style>


<DIV>
<div id="inner">
<div id="inner2">
<p>Left Content goes here</p>
<p>Left Content goes here</p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p>Left Content goes here</p>
<p>Left Content goes here</p>

</div>
</div>
</DIV>
//*******************************************************

clear.gif is the transparent image. Now the image is growing as the
content grows. So the whole problem is solved.

However, this only work in IE, Firefox ignores the Z-index, because in
inner2 the z-index is -1. In Firefox the whole black is just a big
white space. After change the z-index to become 2 and 1, the content
shows up, but it doesn't appear to follow the order. inner2 show on top
of inner.

So any solutions...

Thank you so much.
HJ

[Back to original message]