I'm testing a small site in multiple browsers and am getting different results with this code:


If the image is missing:
- Opera 10.0 (Presto) and Midori 0.1.2 (Webkit) will display the text within a 128x128 space;
- Firefox/Iceweasel 3.0.5 (Gecko) and KAzehakase 0.5.4 (libxul-1.9.0.5?) will display just the text, without filling a 128x128 space.

I could put the dimensions in CSS, but then i'd have to do that for every image i'd use... not practical.

Any suggestions? Any good resources for this type of problem?

many browsers discard measurements without a unit

<img src="...path.." alt="text if image is missing" height="128px" width="128px" />

Thanks, but it didn't change behaviour in any of the browsers i listed. Also, i thought units were only valid for CSS, not HTML-tags?

I want to determine the dimensions of the pictures for when, for some reason, the file is missing; and for accessibility. I'd also need to automate the code but i'll pester the PHP-forum for that (or maybe use a templating engine?).

The main reason is for the pages to load correctly, without needing to resize once the images are downloaded by the UA. I'm using XHTML 1.0 Strict; going Transitional is not an option.

Your right, its me reading the w3 page, height='pixels' thinking it meant you had to put the dim in
pixel is the default
do the browsers work with inline styles < style="height:128px;width:128px" >

I had tried inline styles before, but revamped my testing. I'd note both images i'm testing are within <a> tags but i also tried using the images isolated. Here's my new code:


All that changes is the white background, all browsers still don't/render the size. This whole image-size-while-loading issue isn't new, i thought i was making some silly mistake and that there's a Right Way™ to do this...

I've uploaded the site here: http://www.dei.isep.ipp.pt/~i000283/test/

As a remark, both Opera and Midori are the only ones that actually reserve the space for the images according to specified height/width and they are also the only browsers from the ones i listed that actually score 100/100 on the Acid3 test. So maybe it's a rendering/lack of standard issue?

Height and width parameters are deprecated.

When you don't yet have the image, use a blank image the same size. Put some text on it, like "Bob lost the picture."

Many browsers refuse to render space for objects they can't find.

I know it's preferred to use CSS instead, which is what i do. Using a blank image implies having at least one extra image per image size on the server, sounds cumbersome to me. I'll stick with jumpy loading for now, but thanks for the tips.