Show broken image placeholders in Firefox

« Back :: Tagged with Firefox :: Tweaks ::

Update May 2012: The display of broken image placeholders is enabled by default in Firefox, however, in order to make the broken image placeholder to show up the css in this post needs to be added to the UserContent.css file in the /chrome folder. Seems like the file name is also case sensitive, meaning uppercase U and C in UserContent.css.

Update February 2012: This is no longer working as of Firefox 5 and up according to Anonymous #3. However, as of this writing this is the default behaviour.

Here is a neat trick for all you web developers that miss the broken image placeholder icon in Firefox.

As you might have noticed, broken images are not shown in Firefox. It's probably more user-friendly to not show a broken image placeholder, but when you are working with web development, you really want to know if an image doesn't load. In IE they are replaced by a red x, but in Firefox they are silently ignored.

So, how to show broken images then? After struggeling a bit with a Greasmonkey script that replaces a broken link with an image, I finally found this snippet, which once placed in the userContent.css file, "shows" broken images. The Greasmonkey script worked by the way, but I prefer a CSS hack instead of a javascript that probably slows down page rendering.

On Windows XP the userContent.css file can be found at:

C:\Documents and Settings
    \<username>
      \Application Data
        \Mozilla
          \Firefox
            \Profiles
              \<profile>
                \chrome

 

If the userContent.css file doesn't exist, just create it. And here is the code to place in the above file:

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

 

Credits goes to Doxmart Blog

Comments

Anonymous @ November 28th, 2010 - 19:21

Just what i was looking for, thanks! I can't believe Firefox is missing something like this...

Anonymous @ June 3rd, 2011 - 02:03

Awesome, thanks!!

Anonymous @ July 19th, 2011 - 11:12

Unfortunately, this no longer seems to be working in Firefox 5. I've added that CSS rule to my userChrome.css but Firefox still doesn't display anything for missing images.

I have userChrome.css parsed correctly, because the following rule does take effect and shows a larger font size in the URL bar:
#urlbar {
font-size: 16px;
}

Whether browser.display.show_image_placeholders is true or false doesn't make any difference.

There is a question about this at StackOverflow - http://stackoverflow.com/questions/303718/firefox-browser-how-to-display...

Anonymous (not verified) @ January 23rd, 2013 - 23:35

I found a useful article with a list of reasons a website might not work in ie, but works in Firefox:

http://public.madeinengland.co.nz/website-not-working-in-internet-explor...

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <blockquote> <blockcode> <pre> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Copyright © 2010 deuxcode.com
Powered by Drupal. Valid XHTML 1.0 Strict and CSS 2.1.