Posted on Thursday, March 15th (4418 days ago)

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

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.