I’ve found out that Firefox cares about user’s experience by hiding anything that’s irrelevant such as dead image to be shown.

However, it’s not friendly to developers or anyone else who wants to know there’s a dead image there.
After looking up on the Internet, I found out that Firefox is customizable. If you don’t like how Firefox act currently, you can always edit it.

Here, I’ll show you how to show dead image placeholder in Firefox.

I’m on Windows XP, so I am only confident in showing you how to get this done in XP.
Basically, you’ll have to edit userContent.css (create 1 if there isn’t. Usually there’s sample there) inside your Firefox’s profile, under Chrome folder.

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

If you haven’t came here and do stuff to it before, usually there’s 2 files here.

  1. userChrome-example.css
  2. userContent-example.css

These are sample files provided by Firefox. What you’re going to do is, make a copy of userContent-example.css and rename it to userContent.css.

Then you want to edit userContent.css – Open with and text editor and paste this code in at the very bottom of the 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;
  }
}

Now save the file, restart Firefox if you don’t see any changes. Now there should be something like this showing instead of nothing when there’s dead image.

Dead Image Placeholder

Source: Show broken image placeholder in firefox | deuxcode.com & A quick tip on enabling broken image placeholders in Firefox 3 and beyond « Doxmart Blog

Be Sociable, Share!

Related Posts

  • No Related Post