Does img require HTML for formatting?

Question

I have a situation where I need HTML img that is not yet loaded in order to have a given height. The reason is that this height will be used in the calculation, which can work before the image is fully loaded and must remain accurate. I tried the following:

 <div>hello<img src='http://example.com/invalid.gif' class="testimage"> there</div> 

and put in some css

 .testimage { height: 200px; width: 200px; }​ 

and at least in Firefox 5, the extra space is not displayed (and, oddly enough, the broken image is also not displayed, just an empty space). That is, until I add display: inline-block . In at least some other browsers, the default inline display gives the desired result. Is this expected? If so, why?

Here's also jsFiddle: http://jsfiddle.net/uYXD4/

Answer 1

Images replaced by items :

An element whose content goes beyond the CSS formatting model, such as an image, an embedded document, or an applet. For example, the content of an HTML IMG element is often replaced by an image that is assigned to the src attribute.

For replaced elements, display: inline-block should have the exact same effect as display: inline , which is the default.

Thus, this may be a possible explanation for this strange behavior in some browsers *:

They only process fully loaded images as replaceable elements and otherwise treat them as irreplaceable elements. This makes sense in the end, and the standard does not explicitly prohibit it. As a result, there are 3 possible scenarios:

• replaceable element, inline or inline block does not matter, the height property works
• inline non-replaced element, height attribute has no effect
• non-substituted inline-block element, height property works

Uploaded images always qualify as 1., and broken / upload images can qualify as 1. or 2. (or 3. if you set the display: inline-block explicitly)

* Not sure if this really works.

Answer 2

it says images are inline elements - http://htmlhelp.com/reference/html40/special/img.html

On the other hand, look here - Is the <img> block element level or inline level?

It seems that the element <img> is both integrated and block. There are no strict rules that define it, so it’s likely that browser developers themselves decide on the default values. So your best bet is to reset their assumptions to display: inline-block

Answer 3

Why not use something like

 <img src="..." width=400 height=200> 

I do the same and it works very well. Another option is ...

 $('.myimg').load( function() { /* ops */ } ); 

although I don’t know if the image is expected to load in all browsers or not