How to handle broken images in Firefox

Last week, at work, I was working on a project that deals with image management. I noticed that Firefox was not displaying a placeholder for an image with a broken URL, despite being given explicit width and height, both as HTML attributes and CSS properties. All other browsers had the broken rectangle displayed, thus stretching the container box properly. Firefox falls back in line if the image receives display: block, but in the default case, it is very easy to overlook a broken image.

After a bit of Google-Fu I came across this article from doxmart.com that offers a CSS rule to be added in the custom stylesheet of the browser in order to enable the display of the placeholders. The same rule can be used in your website’s stylesheet as well to enable the functionality for all visitors.

Here is the CSS rule:

img:-moz-broken {
    -moz-force-broken-image-icon: 1;
}

Here is how the placeholders look in the three main browsers:

Chrome

Internet Explorer 8

Firefox

I did not manage to study in enough details the specifications to see which browser does the correct thing. For the sake of consistency I dare think that until this feature becomes enabled by default in Firefox, the little snippet of code can be made part of the reset stylesheet of your websites.