html_code_clinic thread: Instant HTML Programmer's Reference (HTML 4.0 Edition) 1568
David,
>>I am having problems writing a web site that is both compatible with IE4
>>and N4. The problem lies with using CSS to position images on the page.
You've got two separate problems here.
>> Running the above on IE4 or IE5 shows the last logo (Div3) at the
>>front, followd by (Div2) and then finally (Div1) on the bottom. However,
>>running on Netscape Communicator 4.73 gives exactly the opposite result!!
Indeed it does. Try the new beta of Netscape 6, this conforms with IE4 and
IE5 and leads me to conclude that Navigator 4's support of style sheet was
very poor (which we knew already) and in this case erroneous.
>>Please can you offer any suggestions. I have tried using z-index but this
>>does not seem to have any effect on images.
Given that I've concluded NC4 is at fault here, I have played around and
found some workarounds. The second problem I mentioned was with z-index and
that is that z-index is not being used correctly. You need to use it with
the absolute positioning properties of style sheets to get it to function. I
don't know exactly what you wish to do with the logos, but I've managed to
get layering and z-index to work consistently on both IE and NC! The problem
is that you have been using margin-top, which doesn't work in conjunction
with z-index. Try the following code and I think you'll find that it works
the same on both IE and NC:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE TYPE="text/css">
.layer1
{
z-index: 3;
position: absolute;
top:100;
}
.layer2
{
z-index: 2;
position: absolute;
top: 80;
}
.layer3
{
z-index: 1;
position: absolute;
top: 60;
}
</STYLE>
</HEAD>
<BODY>
<DIV ID=Div1 class=layer1><IMG SRC="logo.gif"></DIV>
<DIV ID=Div2 class=layer2><IMG SRC="logo.gif"></DIV>
<DIV ID=Div3 class=layer3><IMG SRC="logo.gif"></DIV>
</BODY>
</HTML>
Please write to the list if you have any more queries,
Cheers,
Chris Ullman
View Cart
