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?

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? — Bazzz
– Bazzz, Commented Jan 18, 2013 at 10:03

Moguha · Accepted Answer · 2013-02-18 07:27:10Z

11

You should change the DOM element representation

img{ display:block; }

or

img{ display:inline-block; }

or

img{ float:left; }

edited Feb 18, 2013 at 7:27

answered Feb 15, 2013 at 13:46

Moguha

1196 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:08:50Z

2

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://stackoverflow.com/a/6744791/1915183

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jan 18, 2013 at 10:18

Mario Bellart

5042 silver badges13 bronze badges

2 Comments

Moss Over a year ago

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

andreszs Over a year ago

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.

Milind · Accepted Answer · 2013-01-18 10:09:49Z

1

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

answered Jan 18, 2013 at 10:09

Milind

4572 gold badges9 silver badges23 bronze badges

2 Comments

cincplug Over a year ago

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

andreszs Over a year ago

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.

Collectives™ on Stack Overflow

Force Firefox to render empty image within dimensions specified by CSS

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Related