If you’re a keen web-developer and tend to do a lot of testing in Firefox, you will have probably come across the problem of  not noticing broken images, as Firefox will not render anything if the image cannot be found.

The one thing I certainly miss from Internet Explorer since migrating to Firefox was the broken image placeholder, or the big red cross. The only reason I personally still use Internet Explorer is purely for testing purposes, to ensure the Doxmart experience is just as good and usable in every common web browser.

To enable this feature in Firefox, the most commonly suggested method seems to be to visit ‘about:config’ in Firefox, and ensure that ‘browser.display.show_image_placeholders’ is set to ‘true’, but in my case this was already enabled and still not showing placeholders.

In order to get these working in my particular environment (Windows Server 2008, Firefox 3.5), i had to navigate to ‘%appdata%\Mozilla\Firefox\Profiles\<username>\chrome’, or, if you’re on a domain, it may be found in ‘%appdata%\Roaming\Mozilla\Firefox\Profiles\<username>\chrome’. In this directory, you should find a file entitled ‘UserContent-example.css’. Rename this file to ‘UserContent.css’ and add the following CSS rule:

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

Save this file, and restart Firefox. Any broken images should now show a broken image placeholder, which will enable you to easily identify missing or broken images during development.

There are also several other tweaks for Firefox that can be implemented using CSS, see this article from Mozilla for more information: Customizing Mozilla