Relative position of image - how to remove gap

Hi,

My situation is i have a jpg on a webpage and want to overlay a png
over the top of it (which has transparent pixels, so bits of the jpeg
come through. I am doing this like this :

<img style="position:relative; TOP:180px; LEFT:150px;
WIDTH:50px; HEIGHT:50px" border="0" src="image1.png">
<img src="big_image.jpg"/>

Which is all ok (ive applied a fix to make png transparency work in
IE6), only there is a gap, where the png would naturally sit in the
flow of the document is consuming space even though its not there
anymore.

Is there anyway of collapsing this gep doen to nothing?


thanks,

Paul

Hi,

Ive found a solution in case this helps anyone else, its probably not
the most elegent solution :

<img style="position:relative; TOP:0px; LEFT:380px; WIDTH:50px;
HEIGHT:50px; margin-right:-50px" border="0" src="3year-guarantee.png">

<img border="0" src="bmw1.jpg" width="440" height="330">

but ive basically added a negative right margin to the png, same value
as its width, so it is in effect not taking up any space.


paulroskilly (AT) gmail (DOT) com wrote:

Hi,

My situation is i have a jpg on a webpage and want to overlay a png
over the top of it (which has transparent pixels, so bits of the jpeg
come through. I am doing this like this :

img style="position:relative; TOP:180px; LEFT:150px;
WIDTH:50px; HEIGHT:50px" border="0" src="image1.png"
img src="big_image.jpg"/

Which is all ok (ive applied a fix to make png transparency work in
IE6), only there is a gap, where the png would naturally sit in the
flow of the document is consuming space even though its not there
anymore.

Is there anyway of collapsing this gep doen to nothing?


thanks,

Paul