Firefox ignores img height / width?

Discussion in 'HTML' started by Tomasz Chmielewski, Nov 2, 2007.

  1. I noticed that Firefox ignores img height and width.

    This can be demonstrated with the simple code pasted below (or, just go
    to http://wpkg.org/test.html).

    The code below points to a non-existing image (or an image which can't
    be fetched).
    In IE or Konqueror, we will see a 400px x 200px blank space.

    In Firefox and Seamonkey we just don't have any blank space (specified
    by height and width), so website look will likely break without an image.

    Which browser's behaviour is correct?


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>test</title>
    </head>
    <body>
    <table style="text-align: left; width: 100%;" border="1" cellpadding="2"
    cellspacing="2">
    <tbody>
    <tr>
    <td>
    <img style="width: 400px; height: 200px;" alt="Image file missing"
    src="no_such_image.jpg"><br>
    IE will show a 400px x 200px blank space. Firefox will not show any
    blank space, although we specified image width and height.
    </td>
    </tr>
    </tbody>
    </table>
    <br>
    </body>
    </html>



    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 2, 2007
    #1
    1. Advertising

  2. Tomasz Chmielewski

    Roderik Guest

    Tomasz Chmielewski schreef:
    > I noticed that Firefox ignores img height and width.
    >
    > This can be demonstrated with the simple code pasted below (or, just go
    > to http://wpkg.org/test.html).
    >
    > The code below points to a non-existing image (or an image which can't
    > be fetched).
    > In IE or Konqueror, we will see a 400px x 200px blank space.
    >
    > In Firefox and Seamonkey we just don't have any blank space (specified
    > by height and width), so website look will likely break without an image.
    >
    > Which browser's behaviour is correct?
    >


    If the image is not available it falls back to the alternative, the alt
    text, which is probably rendered as an inline element.
    If it is right to fall back to an inline element, I don't know. I would
    also prefer that it just took the dimensions as specified.
    Roderik, Nov 2, 2007
    #2
    1. Advertising

  3. Tomasz Chmielewski

    Andy Dingley Guest

    On 2 Nov, 17:17, Tomasz Chmielewski <> wrote:
    > I noticed that Firefox ignores img height and width.


    > The code below points to a non-existing image (or an image which can't
    > be fetched).
    > In IE or Konqueror, we will see a 400px x 200px blank space.


    By "ignores the height of an image", just which image did you mean?
    You didn't supply an image, so the size of it becomes an irrelvance.
    Instead FF sizes the relevant box to be a suitable sive to display the
    alt text you supplied. On the whole, this seems like a more useful
    behaviour, IMHO.

    > In Firefox and Seamonkey we just don't have any blank space (specified
    > by height and width), so website look will likely break without an image.


    What do you mean by "break" ? If you mean that the layout of the
    website will break if the image isn't present, then that's the fault
    of the coder for relying on using images to control the size and
    layout of things! That technique has been obsolete for over 10 years,
    since HTML 4 and CSS first appeared.
    Andy Dingley, Nov 2, 2007
    #3
  4. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-02, Roderik <> wrote:
    > Tomasz Chmielewski schreef:
    >> I noticed that Firefox ignores img height and width.
    >>
    >> This can be demonstrated with the simple code pasted below (or, just go
    >> to http://wpkg.org/test.html).
    >>
    >> The code below points to a non-existing image (or an image which can't
    >> be fetched).
    >> In IE or Konqueror, we will see a 400px x 200px blank space.
    >>
    >> In Firefox and Seamonkey we just don't have any blank space (specified
    >> by height and width), so website look will likely break without an image.
    >>
    >> Which browser's behaviour is correct?
    >>

    >
    > If the image is not available it falls back to the alternative, the alt
    > text, which is probably rendered as an inline element.
    > If it is right to fall back to an inline element, I don't know. I would
    > also prefer that it just took the dimensions as specified.


    I suppose the issue is whether img is display: inline or display:
    inline-block.

    If it's inline, then it goes from being replaced inline to just
    ordinary inline. Width and height don't apply to non-replaced inline
    elements.

    If it's inline-block, then it goes from being replaced inline-block
    (which is exactly the same as replaced inline) to ordinary inline-block,
    which is not the same as inline, because width and height do work for
    inline-block. That's what Opera appears to do for example.

    Since Firefox doesn't support inline-block, it's perhaps not surprising
    that img is replaced inline.

    Either is correct.
    Ben C, Nov 2, 2007
    #4
  5. Tomasz Chmielewski wrote:
    > I noticed that Firefox ignores img height and width.
    >
    > This can be demonstrated with the simple code pasted below (or, just go
    > to http://wpkg.org/test.html).
    >
    > The code below points to a non-existing image (or an image which can't
    > be fetched).
    > In IE or Konqueror, we will see a 400px x 200px blank space.
    >
    > In Firefox and Seamonkey we just don't have any blank space (specified
    > by height and width), so website look will likely break without an image.
    >
    > Which browser's behaviour is correct?
    >
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html><head><meta content="text/html; charset=ISO-8859-1"
    > http-equiv="content-type">
    > <title>test</title>
    > </head>
    > <body>
    > <table style="text-align: left; width: 100%;" border="1" cellpadding="2"
    > cellspacing="2">
    > <tbody>
    > <tr>
    > <td>
    > <img style="width: 400px; height: 200px;" alt="Image file missing"
    > src="no_such_image.jpg"><br>
    > IE will show a 400px x 200px blank space. Firefox will not show any
    > blank space, although we specified image width and height.
    > </td>
    > </tr>
    > </tbody>
    > </table>
    > <br>
    > </body>
    > </html>


    Since image is inline as default, if missing FF only displays the alt
    text and the "height" needed got that inline text... Want constancy, then:
    ADD
    vvvvvvvvvvvvvvv
    <img style="width: 400px; height: 200px; display: block;" alt="Image
    file missing" src="no_such_image.jpg"><br>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Nov 2, 2007
    #5
  6. Tomasz Chmielewski

    Roy A. Guest

    Tomasz Chmielewski skrev:
    > I noticed that Firefox ignores img height and width.


    First of all, a vendor don't have to follow any specifications.

    > This can be demonstrated with the simple code pasted below (or, just go
    > to http://wpkg.org/test.html).


    Thank you for that example. It shows that Firefox is getting ready
    enough to bend som rules.

    > The code below points to a non-existing image (or an image which can't
    > be fetched).
    > In IE or Konqueror, we will see a 400px x 200px blank space.


    "This property specifies the content height of boxes generated by
    block-level and replaced elements."
    http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

    > In Firefox and Seamonkey we just don't have any blank space (specified
    > by height and width), so website look will likely break without an image.


    That's true. But why don't you supply an image? Don't use images as an
    plaseholder, maybe that's the reason.

    > Which browser's behaviour is correct?


    These people are just playing with words. The specification says:

    "This property specifies the content height/width of boxes generated
    by block-level and replaced elements."
    http://www.w3.org/TR/REC-CSS2/visudet.html

    If there is no block-level or replaced elements to genereate any
    height/width, there is always a
    property who specifies it.

    I have read all the specifications, but it is to much form me. Maybe
    someone can cum up
    with something I didn't understand.
    Roy A., Nov 2, 2007
    #6
  7. Tomasz Chmielewski

    Roy A. Guest

    On 2 Nov, 18:51, Andy Dingley <> wrote:
    > On 2 Nov, 17:17, Tomasz Chmielewski <> wrote:
    >
    > > I noticed that Firefox ignores img height and width.
    > > The code below points to a non-existing image (or an image which can't
    > > be fetched).
    > > In IE or Konqueror, we will see a 400px x 200px blank space.

    >
    > By "ignores the height of an image", just which image did you mean?


    The OP did not say that height and width did refer to any image. An
    image is an
    replaced element. So I think he was talking about the box around the
    image.

    > You didn't supply an image, so the size of it becomes an irrelvance.


    Why? An image is an replaced element, it's the box around that's
    importent. Just look at how the object element is rendered, without an
    image, object or other references. I really don't think Firefox should
    make exeptions like that. I know other browsers do that. But Firefox??

    > Instead FF sizes the relevant box to be a suitable sive to display the
    > alt text you supplied. On the whole, this seems like a more useful
    > behaviour, IMHO.


    For you it might seems like a more useful behviour. But the rest of us
    would have some
    problem:

    "This property specifies the content height of boxes generated by
    block-level and replaced elements."
    http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height

    > > In Firefox and Seamonkey we just don't have any blank space (specified
    > > by height and width), so website look will likely break without an image.

    >
    > What do you mean by "break" ? If you mean that the layout of the
    > website will break if the image isn't present, then that's the fault
    > of the coder for relying on using images to control the size and
    > layout of things!


    No, the fault is that the coder is relaying on height and width when
    dispalying the alt text.

    > That technique has been obsolete for over 10 years,
    > since HTML 4 and CSS first appeared.


    Now we can't specify height and widht on images? I don't think so.
    Roy A., Nov 2, 2007
    #7
  8. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-02, Roy A. <> wrote:
    > On 2 Nov, 18:51, Andy Dingley <> wrote:
    >> On 2 Nov, 17:17, Tomasz Chmielewski <> wrote:
    >>
    >> > I noticed that Firefox ignores img height and width.
    >> > The code below points to a non-existing image (or an image which can't
    >> > be fetched).
    >> > In IE or Konqueror, we will see a 400px x 200px blank space.

    >>
    >> By "ignores the height of an image", just which image did you mean?

    >
    > The OP did not say that height and width did refer to any image. An
    > image is an
    > replaced element. So I think he was talking about the box around the
    > image.
    >
    >> You didn't supply an image, so the size of it becomes an irrelvance.

    >
    > Why? An image is an replaced element, it's the box around that's
    > importent. Just look at how the object element is rendered, without an
    > image, object or other references. I really don't think Firefox should
    > make exeptions like that. I know other browsers do that. But Firefox??


    The question is, is it still a replaced element when the image isn't
    actually there and the alt text is displayed instead?

    If not, then you can make sense of what's happening by observing that
    Firefox displays it as a non-replaced inline, and Opera as a
    non-replaced inline-block.
    Ben C, Nov 2, 2007
    #8
  9. Tomasz Chmielewski

    Roy A. Guest

    On 3 Nov, 00:24, Ben C <> wrote:
    > On 2007-11-02, Roy A. <> wrote:
    >
    > > On 2 Nov, 18:51, Andy Dingley <> wrote:
    > >> On 2 Nov, 17:17, Tomasz Chmielewski <> wrote:

    >
    > >> > I noticed that Firefox ignores img height and width.
    > >> > The code below points to a non-existing image (or an image which can't
    > >> > be fetched).
    > >> > In IE or Konqueror, we will see a 400px x 200px blank space.

    >
    > >> By "ignores the height of an image", just which image did you mean?

    >
    > > The OP did not say that height and width did refer to any image. An
    > > image is an
    > > replaced element. So I think he was talking about the box around the
    > > image.

    >
    > >> You didn't supply an image, so the size of it becomes an irrelvance.

    >
    > > Why? An image is an replaced element, it's the box around that's
    > > importent. Just look at how the object element is rendered, without an
    > > image, object or other references. I really don't think Firefox should
    > > make exeptions like that. I know other browsers do that. But Firefox??

    >
    > The question is, is it still a replaced element when the image isn't
    > actually there and the alt text is displayed instead?


    That's a better question. If yes, it make sense that alt text is
    displayed as an replaced element. It's a mesh to sometimes display it
    as an replaced element, and sometimes display it as an non-replaced
    element.

    > If not, then you can make sense of what's happening by observing that
    > Firefox displays it as a non-replaced inline, and Opera as a
    > non-replaced inline-block.


    Slow down, 'inline-block' is CSS 2.1. The img element is an inline
    element, not an 'inline-block' element. What's next? display: auto?
    Opera, and some others displays it as an replaced inline element, not
    an non-replaced inline-block.
    Roy A., Nov 3, 2007
    #9
  10. Tomasz Chmielewski

    Ben C Guest

    On 2007-11-03, Roy A. <> wrote:
    > On 3 Nov, 00:24, Ben C <> wrote:
    >> On 2007-11-02, Roy A. <> wrote:

    [...]
    >> > Why? An image is an replaced element, it's the box around that's
    >> > importent. Just look at how the object element is rendered, without an
    >> > image, object or other references. I really don't think Firefox should
    >> > make exeptions like that. I know other browsers do that. But Firefox??

    >>
    >> The question is, is it still a replaced element when the image isn't
    >> actually there and the alt text is displayed instead?

    >
    > That's a better question. If yes, it make sense that alt text is
    > displayed as an replaced element. It's a mesh to sometimes display it
    > as an replaced element, and sometimes display it as an non-replaced
    > element.
    >
    >> If not, then you can make sense of what's happening by observing that
    >> Firefox displays it as a non-replaced inline, and Opera as a
    >> non-replaced inline-block.

    >
    > Slow down, 'inline-block' is CSS 2.1. The img element is an inline
    > element, not an 'inline-block' element. What's next? display: auto?
    > Opera, and some others displays it as an replaced inline element, not
    > an non-replaced inline-block.


    You may be right, but a browser can perfectly well make an img
    inline-block by default-- a replaced inline-block displays exactly the
    same as a replaced inline.

    But I tried a little JavaScript test:

    var elt = document.getElementById("one");
    var style = getComputedStyle(elt, "");
    alert(style.display);

    And Opera does report "inline", not "inline-block", both when the actual
    image is present and when it isn't.
    Ben C, Nov 3, 2007
    #10
  11. Jonathan N. Little schrieb:
    > Tomasz Chmielewski wrote:
    >> I noticed that Firefox ignores img height and width.
    >>
    >> This can be demonstrated with the simple code pasted below (or, just
    >> go to http://wpkg.org/test.html).
    >>
    >> The code below points to a non-existing image (or an image which can't
    >> be fetched).
    >> In IE or Konqueror, we will see a 400px x 200px blank space.
    >>
    >> In Firefox and Seamonkey we just don't have any blank space (specified
    >> by height and width), so website look will likely break without an image.
    >>
    >> Which browser's behaviour is correct?
    >>
    >>
    >> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >> <html><head><meta content="text/html; charset=ISO-8859-1"
    >> http-equiv="content-type">
    >> <title>test</title>
    >> </head>
    >> <body>
    >> <table style="text-align: left; width: 100%;" border="1"
    >> cellpadding="2" cellspacing="2">
    >> <tbody>
    >> <tr>
    >> <td>
    >> <img style="width: 400px; height: 200px;" alt="Image file missing"
    >> src="no_such_image.jpg"><br>
    >> IE will show a 400px x 200px blank space. Firefox will not show any
    >> blank space, although we specified image width and height.
    >> </td>
    >> </tr>
    >> </tbody>
    >> </table>
    >> <br>
    >> </body>
    >> </html>

    >
    > Since image is inline as default, if missing FF only displays the alt
    > text and the "height" needed got that inline text... Want constancy, then:
    > ADD
    > vvvvvvvvvvvvvvv
    > <img style="width: 400px; height: 200px; display: block;" alt="Image
    > file missing" src="no_such_image.jpg"><br>


    What's interesting, when Firefox still loads such a page (that is,
    without your "display: block" tip), it displays the missing image
    exactly the same as IE or Konqueror (an empty box with a given size
    instead of an image).
    Only when the page is fully loaded, the missing image "scales down" to
    the size of "alt" text.


    --
    Tomasz Chmielewski
    http://blog.wpkg.org
    Tomasz Chmielewski, Nov 3, 2007
    #11
  12. Roy A. schrieb:

    >> In Firefox and Seamonkey we just don't have any blank space (specified
    >> by height and width), so website look will likely break without an image.

    >
    > That's true. But why don't you supply an image? Don't use images as an
    > plaseholder, maybe that's the reason.


    I "discovered" it pretty accidentally.

    I was trying to find out why a 100% HTML/CSS-compliant page renders
    correctly in Firefox/IE, but looks like crap in Konqueror.
    After I removed an image, I noticed that the page starts to look crappy
    in exactly the same way in Firefox.


    --
    Tomasz Chmielewski
    http://wpkg.org
    Tomasz Chmielewski, Nov 3, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?RG90Y29t?=
    Replies:
    4
    Views:
    398
    =?Utf-8?B?RG90Y29t?=
    Nov 9, 2005
  2. Wladimir Borsov
    Replies:
    7
    Views:
    21,362
    eswar
    Apr 20, 2012
  3. Frank Rizzo
    Replies:
    3
    Views:
    28,437
    dojohansen
    Sep 9, 2008
  4. MyndPhlyp

    Setting <img> height to match <td> height

    MyndPhlyp, Dec 21, 2003, in forum: Javascript
    Replies:
    5
    Views:
    182
    MyndPhlyp
    Dec 22, 2003
  5. Replies:
    7
    Views:
    160
    Tad McClellan
    Jun 22, 2006
Loading...

Share This Page