Firefox ignores img height / width?

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?


"http://www.w3.org/TR/html4/strict.dtd">
http-equiv="content-type">

src="no_such_image.jpg"> IE will show a 400px x 200px blank space. Firefox will not show any blank space, although we specified image width and height.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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?
>
>
> > "http://www.w3.org/TR/html4/strict.dtd">
> > http-equiv="content-type">
>
>
>
>

> > src="no_such_image.jpg"> > IE will show a 400px x 200px blank space. Firefox will not show any > blank space, although we specified image width and height. >

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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.

Re: Firefox ignores img height / width?

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?
>>
>>
>> >> "http://www.w3.org/TR/html4/strict.dtd">
>> >> http-equiv="content-type">
>>
>>
>>
>>

>> >> src="no_such_image.jpg"> >> IE will show a 400px x 200px blank space. Firefox will not show any >> blank space, although we specified image width and height. >>

Re: Firefox ignores img height / width?

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