Home/ Questions/Q 8299595
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T16:12:33+00:00

Imagine three images with fixed size: <!DOCTYPE html> <html> <head> <style type=text/css> div.photos img

  • 0

Imagine three images with fixed size:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        div.photos img {
            width: 320px;
            height: 240px;
            background-color: black;
        }
    </style>
  </head>
  <body>
    <div class="photos">
        <img src="abc" />
        <img src="def" />
        <img src="ghi" />
    </div>
  </body>
</html>

When you look at such page in IE or Chrome, you’ll see what I expected – threee images with fixed sizes.
In Firefox however, it doesn’t work.

But if I set the images to display: block; or remove the DOCTYPE (doesn’t show on jsfiddle) it works.

What am I doing wrong?
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seems to be an old feature in Firefox: I found a discussion about it from year 2007:

    So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the img element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height and width, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.

    If you add alt attributes (as you should, every img should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt here as equivalent to alt="", implying zero width.

    This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.

    • 0