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 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:


Internet Explorer 8


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.

2 thoughts on “How to handle broken images in Firefox”

  1. Firefox is a browser that focuses on opening web sites rapidly while keeping those nasty pop-ups and spyware at bay. Firefox was in its final stages last summer and fortunately for the up and coming browser two federal agencies recommended Internet surfers choose a different browser than Internet Explorer due to security issues IE was facing. This timing was perfect for Firefox and when it was placed on the web for download there were so many people trying to download at once the server almost could not handle all of the requests.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.