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 - 18:21
Just what i was looking for, thanks! I can't believe Firefox is missing something like this...
Anonymous @ June 3rd, 2011 - 01:03
Awesome, thanks!!
Anonymous @ July 19th, 2011 - 10: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...
Post new comment