JQuery in Firefox: Images are fading from black, not from the other images

Question

I got a kind of weird problem: I want to fade images. The Code works, but the fading effect looks f###ed up, at least in the newest Firefox. But on other sites (on the web), it apparently works well in the same browser. OK, here's my code:

HTML:

<div class="fade">
  <img src="http://localhost/ami/wp-content/gallery/ami/400_1.jpg" alt="test" />
  <div class="firstpic">
    <img src="http://localhost/ami/wp-content/gallery/ami/400_2.jpg" alt="test2" />
  </div>
</div>

CSS:

.fade{top: 115px; left: 290px; position: absolute; display: block;}

.firstpic{position: absolute; top: 0px; left: 0px; display: none;}

Javascript:

$("#button").click(function(){
    $(".firstpic").fadeIn(800);
});

So, this setup is pretty easy: I got two div's, both positioned absolute. The div with the class "firstpic" is IN the div with the class "fade". Both are containing one img-element. The div with class "firstpic" is by default not visible (see CSS), so that it can be faded in. Fading it in is triggered by pressing a button (see the Javascript). But instead of nicely fading in, it fades in with a black background. I think it could be because of the "img"-Element. When I use two div's with css-background images, it fades nicely. But I need img-Elements, since I need to resize the pictures. Any help would be really appreciated. Thanks.

Answer 1

This is an issue that started cropping up in more recent releases of Firefox. Give the images a css background