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

Tags: Broken image, Firefox, Image placeholder, missing image, show image placeholder

This entry was posted on Tuesday, August 11th, 2009 at 10:25 AM (BST) and is filed under Technical, articles. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.