I am attempting to display two images on a web page. The second
"image" is actually two images, one overlaid on the other. The first
one is aligned on the left using float:left. I have enclosed the next
two images in a <DIV> tag with float: right in order to force the
containing content to be aligned on the right. I also set
position:relative so that any absolute positioning within the <DIV>
will be relative to the itself.
The overlay image (id=ma_1_1_1) has position:absolute with left and
top set to 0 to force it to display on top of the image with id=map.
This works fine in IE6, but does not work at all in Netscape 7. In
Netscape 7, the overlay image is positioned all the way to the left.
Does anyone know how to make the overlay image line up on the right in
Netscape? Thanks.
<BODY>
<DIV>
<IMG style="float:left" id=img1 src="images/hiking.jpeg">
<DIV style="float:right; position: relative">
<IMG id=map height=245 src="images/cruise.jpg" width=375>
<IMG id=ma_l_1_1 style="position: absolute; top: 0px left: 0px;"
height=245 src="images/overlay.gif" width=375 border=1>
</DIV>
</DIV>
</BODY>
