PNG background images in Firefox 3.x disappear and do not load

Question

The problem is this:

I have a div (#bottom), which is NOT floated, which has a pre-defined height in CSS (of 24px;), which USED TO display its background (bottom.png) until I put something inside.

CSS:

#bottom {height: 24px; background-image: url("bottom.png");}

HTML: 

<div id="bottom">
<div id="somethingInside">
</div>
</div>

Now FF 3.x does not LOAD the background image! I can put another image used on the same page, within the same html file, and make CSS use it as a background image for that #bottom div and then it shows up there.

But I can't load the image in the browser EVEN if I click "show background image" in FF context menu or when I enter the bottom.png path. Instead only the path to the bottom.png file shows there... If I use a gif file than everything works fine. When I use a PNG, then it doesn't work.

If I rename the bottom.png to whatever.png, it does not load either. If I invoke bottom.png as a background anywhere else in the same file, it doesn't work.

If I remove the div#somethinginside from div#bottom, the problem persists.

It all changed after I included bottom.png into div#bottom as <img src="bottom.png" />, then the background returned, the was displayed but some other pngs I used below in the file disappeared.

This is by far the most annoying phenomena I have ever encountered, as I can't find any explanation for that. It looks as if Firefox blacklisted that file or something, stupid it may sound, though.

It's not a path issue: i have many files in the same folder. It's not a '/" in url("myUrl") in CSS issue: I copy/paste paths for files that do work. I always save via Save for web in Photoshop. The same happens, irrespective of whether I'm using PNG 8 and PNG 24 images. I'm working on a local server, XAMPP. I'm using Joomla. And Windows XP Pro. And it ONLY happens in Firefox, currently 3.5.7 for me. Not an issue in IE8.

Has anyone encountered a problem like that? I can't even reproduce it on demand since i don't even know what's causing this strange behavior. And it applies mostly to PNG files for some reason. It's the second time this happens, and it's a completely different project. Is there some PNG/Firefox bug?

Answer 1

With Firefox it´s easy, just use firebug to see what´s happening.

By the way, have you tried it in Firefox in Safe Mode? Perhaps it´s an add-on that´s causing trouble.

And with what browsers (and versions) does it work?