Problems with transparent .png image over another image in firefox/IE

I want to place a transparent .png image exactly over another image, 开发者_如何学JAVAlets say .jpeg

Here is my code:

<img src='someimage.jpg' width='480px' height='360px' /> 
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />

It works fine in Chrome,Safari and maybe new versions of Firefox. In older versions of Firefox, and in all versions of IE it won't work - instead the transparent image is shown to the right, above the .jpeg image.

Can anybody give me a fix to this?

---

Here's a much easier way to ensure the images are on top of each other:

<div id="image-combo">
  <img src="someimage.jpg" style="width: 480px; height: 360px" />
  <img src="someother.png" style="width: 480px; height: 360px" />
</div>

And here's the CSS:

#image-combo {
    position: relative;
    width: 480px;
    height: 360px;
}

#image-combo img {
    position: absolute;
    top: 0;
    left: 0;
}

---

I do not believe this is a browser issue. This is a window size issue...

You really have two 480 pixel images next to each other so it depends on how wide you have your browser window.

If your window is less than 960 pixels wide, your code works because the second image wraps to the line under the first image.

If the window is more than 960 pixels wides, your code will not work and fails as you describe because the second images simply sits to the right of the first. Your code moves the second image up so the second one will be on the right and the negative margin moves it up the exact height of the first image.

A quick fix would be to insert a line-break <br /> between the two images to insure the second image is always below the first image. Also there is not supposed to be "px" in the img properties of width and height, so remove those.

<img src='someimage.jpg' width='480' height='360' /><br />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />

There are probably more elegant solutions out there, like using container <div>'s, but without seeing the context of the rest of your code, it's impossible to say what would be best.