Force Firefox to render empty image within dimensions specified by CSS

Question

All major browsers except FF render images with invalid src attribute within it's dimensions as specified by CSS or by width / height attributes. Only FF will render the alt attribute as it were text node, ignoring dimensions, which breaks layout in many cases.

Is there a way to force FF to render image within specified dimensions?

Garrote

Code? Example? Screenshot? Anything? – Uranography

Not sure but have you tried adding display:inline-block to the image css? Perhaps when FF converts it to a text node it becomes functionally the same as a span and ignores width and height css? – Haydon

Answer 1

try to write width: and height attribute in img tag itself or use !important for width and height in CSS

Phonetics

Yes, thanks. Setting attributes didn't work, but adding !important to declaration in CSS made it work, along with overflow:hidden. – Garrote

The !important declaration is one of the worst ideas ever created, I can't believe someone would suggest that. Fix the root issue with the proper methods instead, !important tag was created for inept developers exclusively. – Speakeasy

Answer 2

You should change the DOM element representation

img{
 display:block;
}

or

img{
 display:inline-block;
}

or

img{
 float:left;
}

Bogor

Answer 3

try adding this rule to the css:

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

jsfiddle sample

source from: https://mcmap.net/q/1478532/-how-to-display-non-existing-images-the-way-ie-opera-does

Tricrotic

I combined :-moz-broken with display: inline-block. Works for me! – Supper

Great suggestion, I always wanted back the icon for broken images, it makes it much easier to locate them quickly... thanks. Better remove the width and height from CSS and just use the self width and height attributes from each image. – Speakeasy