Dan Dascalescu Reporter
	Description • 13 years ago

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
Build ID: 20110413222027

Steps to reproduce:

For easing web development, I want to display an image placeholder for missing images, just as IE does.

As recommended in many places online[1][2], I've added the following rule to userChrome.css:
/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width:24px;
    height:24px;
  }
}

[1]: http://stackoverflow.com/questions/303718/firefox-browser-how-to-display-non-existing-images-the-way-ie-opera-does/6744791#6744791
[2]: https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon


Actual results:

After restarting Firefox, rendering a piece of HTML like "foo<img src='bogus'>bar" shows nothing between "foo" and "bar".


Expected results:

There should have been an image placeholder between "foo" and "bar".

Possibly related: issue 333954 comment 8.

	Jez
	Comment 1 • 13 years ago

Ugh.  What does Mozilla have against broken image placeholders?  :-)  They should be enabled by default, let alone working.

	Boris Zbarsky [:bzbarsky]
	Comment 2 • 13 years ago

> They should be enabled by default

If the placeholder is shown, then the alt text is NOT shown (or rather only as much as fits in the image area is shown; that would be 24px by 24px above).  So no, by default we want to show the alt text, not the placeholder.  We could show a placeholder in _addition_ to the inline alt text, and there are open bugs on that.  But that's not what the current code is set up to do.

That said, I can't reproduce this issue.  I'll attach a testcase in a second that shows it working just fine.  Are you sure you edited the right userChrome.css?

	Jez
	Comment 4 • 13 years ago

(In reply to comment #2)
> > They should be enabled by default
> 
> We could show a placeholder in _addition_ to the inline alt
> text

Or show the placeholder when there's no ALT text, or it's empty.

	Dan Dascalescu Reporter
	Comment 5 • 13 years ago

I do see the broken image in your test case, but the HTML contains the CSS rule.

If there is no CSS rule for broken images *in* the HTML, then Firefox doesn't display the broken image icon.

I'm sure I got the right userChrome.css because the URL bar looks as expected:
/* Give the Awesome Bar a ridiculous font size so 
   it's obvious that userChrome.css is parsed */
#urlbar {
  font-size: 32px;
}

/* Enable image placeholders */
@-moz-document url-prefix(http), url-prefix(file), url-prefix(https) {
  img#x:-moz-broken {
    -moz-force-broken-image-icon: 1;
    width: 24px;
    height: 24px;
  }
}

The web page from the screenshot is http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox

	Boris Zbarsky [:bzbarsky]
	Comment 6 • 13 years ago

> Or show the placeholder when there's no ALT tex

Perhaps, but in many cases the right behavior for images with no alt text (which are therefore just decorative) is to not show anything if the image can't be loaded, since showing the placeholder sort of defeats the purpose (looks uglier).  In any case, this has nothing to do with this bug.

Dan, wait.  You're changing user_Chrome_.css.  That applies to the UI, not to web pages.  You want userContent.css if you want to style webpages.  Sounds like everything is working as it should.  ;)

	Dan Dascalescu Reporter
	Comment 7 • 13 years ago

Thanks Boris, I had the wrong file indeed.

Note: the "img#x:-moz-broken" selector from your test case doesn't work, but the "img:-moz-broken" one does. This code in userContent.css does the trick:

/*
 * Show image placeholders
 */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width: 24px;
    height: 24px;
  }
}

Question: if image dimensions are specified in the document, can the placeholder be automatically sized to fit them?

	Boris Zbarsky [:bzbarsky]
	Comment 8 • 13 years ago

> Note: the "img#x:-moz-broken" selector from your test case doesn't work,

I just needed the "#x" to only select one of the two images (the one with id="x").

> if image dimensions are specified in the document, can the placeholder be
> automatically sized to fit them?

If image dimensions are specified in the document, then the placeholder box will be that size.  The placeholder image will not be; the remaining space in the box, if any, will be used for as much of the alt text as we can fit in.

	Jet
	Comment 9 • 11 years ago

Nothing works with firefox >=3.6.14 so what are people that work with images suppose to do.

Firefox is the ONLY browser and I mean the only one who refuses to show a placeholder for broken images, in forums for e.g a user has no control over alt tags or width height attributes

This is NOT resolved.

	SmoothPorcupine Pirate
	Comment 10 • 11 years ago

Agree with comment #9, although I'm not sure this is the right place for this gripe...

(In reply to Boris Zbarsky [:bz] from comment #6)
> > Or show the placeholder when there's no ALT tex
> 
> Perhaps, but in many cases the right behavior for images with no alt text
> (which are therefore just decorative)

(That)'s a hell of an assumption to be making. Bugs me that I have to select where I expect an image to be (in the cases where I can detect such a thing has happened...) and View Selection Source to get the URL.

	Daniel Holbert [:dholbert]
	Comment 11 • 11 years ago

A few facts:
 (A) Comment 9 and 10 are not about this bug. (This bug was filed for a tweak to a .css file not doing what the reporter expected; he was tweaking the wrong file, and when he realized that, he resolved this as WORKSFORME.)

 (B) RE Comment 9 and 10: the broken image icon *should* already be displayed if the "alt" attribute is unset. (And if "alt" is set, you'll instead see the alt text.)

 (C) If alt happens to be set to the empty string, then yes, the empty string will be displayed. (The idea that this might be reasonable is the "hell of an assumption" that bz was making in comment 6.)

 (D) If you really don't like (C), you can work around it locally using the "Stylish" addon, with a user style that looks like this:
  img[alt=""] { -moz-force-broken-image-icon: 1 }
which will force the display of the icon for images with an empty alt-text attribute. (Add additional lines with alt=" ", alt="  ", etc. if you're worried about a site with just blank spaces in its alt text.)

	SmoothPorcupine Pirate
	Comment 12 • 11 years ago

Thanks, I had managed to figure all that out since my last comment. Apologies.

I now have a few webmasters to enlist gripes with though...

	Masatoshi Kimura [:emk]
	Comment 13 • 11 years ago

(In reply to Daniel Holbert [:dholbert] from comment #11)
>  (B) RE Comment 9 and 10: the broken image icon *should* already be
> displayed if the "alt" attribute is unset.

Only in quirks mode.