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.

Enjoy!


About Joseph R. B. Taylor

is a designer/developer who makes stuff for screens of all shapes and sizes. He currently works at Edvisors, Inc. where he creates screen-based experiences for used by millions of college students every year.

Wanna Talk?

Contact Me