Make Firefox show broken images

One thing that I find annoying while developing in Firefox is the way it hides broken images from it’s users.

In some instances it’s a plus since there’s no ugly red “X"s cluttering pages but I always hate to hear from IE users saying somethings wrong. IE, despite having it’s flaws does a great job of highlighting broken images.

So how to get Firefox to show the broken image? A little CSS fixes things right up:

/* Force Firefox to show image placeholders
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken {
    -moz-force-broken-image-icon: 1;
    width: 100px;
    height: 75px;

You might not want to leave this style rule in production on your site but it’s priceless during development if you prefer Firefox and Firebug like me.


About Joseph R. B. Taylor

Joseph R. B. Taylor is a humble designer/developer who makes stuff for screens of all shapes and sizes. He is currently the lead UI/UX Architect at MScience, LLC, where he works to create simple experiences on top of large rich datasets for their customers and clients.