TannerRitchie Web Applications

Advanced Web Application Development in the GTHA

Show broken images in Firefox

Firefox is probably still the most popular browser for web developers, even though Chrome and perhaps even Internet Explorer are now valid alternatives. That means the failure of Firefox to show the inevitable broken images that creep into websites in the same manner as IE always has, is particularly irritating.

But there is a fix (credit to http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox)

The answer is to put the following code into your personal browser CSS file, which can be found on Ubuntu in ~/.mozilla/firefox/somename.default/chrome/userContent.css (create the file from the example included by default)

/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
    img:-moz-broken{
        -moz-force-broken-image-icon:1;
        width:24px;
        height:24px;
    }
}

Reload Firefox, and broken images  will display with a icon indicating that an image is missing.