The issue at hand is as follows:
I am facing a problem with a non-floated div (#bottom) that has a fixed height defined in CSS (24px), which used to display its background (bottom.png) until I added content inside.
CSS:
#bottom {height: 24px; background-image: url("bottom.png");}
HTML:
<div id="bottom">
<div id="somethingInside">
</div>
</div>
However, after adding content, Firefox 3.x no longer loads the background image! Even when I try to manually load it through the context menu or by entering the path to bottom.png, it fails to display. Interestingly, if I use a different image format like gif, it works fine. The issue persists even if I rename bottom.png or use it as a background elsewhere in the code.
Removing the div#somethinginside from div#bottom does not solve the problem either.
Interestingly, after including bottom.png as an <img src="bottom.png" /> inside div#bottom, the background reappears but other PNGs used later in the file disappear. This baffling behavior is quite frustrating and I cannot seem to find a logical explanation for it. It almost feels like Firefox is blocking the file for some unknown reason.
Some clarifications: - Path issues have been ruled out as all files are in the same folder - Quotation marks in url("myUrl") within CSS are correct - Saving method via Save for Web in Photoshop has been consistent - Working on XAMPP server, using Joomla on Windows XP Pro - Issue isolated to Firefox, does not occur in IE8
Has anyone else experienced such a peculiar problem? The inconsistency with PNG files and Firefox is particularly troubling. This is not the first time encountering this issue, and it seems to be specific to PNG images. Could it be a bug related to PNG files in Firefox?