Empty width and height attributes prevent image rendering in IE

“The page looks good,” my client said, effectively laying down the first slice of “bread” in this positivity sandwich. “But there are no images at the top like in the mock-up.” Atop this negativity filling he completed the sandwich: “I love how it sorts, though!”

I was looking at the page myself (in Firefox), resplendent with header images. “The images are there,” I said, and as I uttered those words I realized my client would be using Internet Explorer. Begrudgingly I opened that browser and saw what he saw; or rather, didn’t see: no images.

Turns out that IE (versions 6, 7, and 8 and under its “compatibility mode”) will not render an image when that image has blank width and height attributes. Much has been written on these attributes, but I’ll summarize by saying that yes, correct attributes (height, width, alt, title, etc.—though probably not lowsrc) are beneficial to the browser and visitor alike. Typically, though, I don’t bother with them during the first iterations of a design because an source image’s dimensions might change but would be overridden (and possibly squished non-proportionally) by defined width and height attributes.

So this code will produce no images in IE:

<img src="logo.png" alt="company logo" width="" height="" />

But this will:

<img src="logo.png" alt="company logo" width="200" height="50" />

This time however, I had used my editing program to drag an image file into my code rather than type it in myself. Helpfully, Coda provided the HTML to display the image, including—but not setting—attributes. I thought nothing of it because Firefox and Safari both ignored the empty values. IE apparently takes a stricter approach and if it finds unset or blank values for width and height, it renders the image accordingly: no width, no height, which effectively removes them from the page.

Is this correct behavior? I can see it both ways. On the strict side it makes sense: the image has attribute values and their values are null; so, render the image accordingly—in this case, with no width or height. On the “common sense” side it doesn’t: yes, the image has attributes but their values are null (not set) so ignore them and instead render the image at its full size—as though its width and height weren’t set. It comes down to good coding practices as a developer, I think: don’t let yourself get into this situation. If you include an attribute, give it a value. Or define all width and height values through CSS. No matter what it is, understand what you do and why you do it so you’re not surprised (especially while on the phone with a client!)

  1. No support for max-width in IE 6 Having built a few one-off, stand-alone web pages (in strict...
  2. The best online game: Google Image Labeler Though not really a “game” per se, I’ve whiled away...

15 comments

  1. Interesting. Do you have the same experience if width and height are not defined at all? I expect not, or we’d probably hear about this more.

  2. Dustin, you’re right–it would be a much more common issue if IE failed to render an image *unless* it had valid width and height attributes. This is just a case of blank attributes causing the problem.

  3. Thank you. I thought I was going nuts on this one.

    I was displaying a swf file with empty width/height values (coming from a third party app) and I could hear the file, just couldn’t see it.

    Page source showed the width/height empty but when I brought the page up in IE’s Developer Tools it set the width and height to 1. Changed the values in the tool and presto they popped in.

    Thanks for confirming what I waa afraid of.

Trackbacks/Pingbacks

  1. Rusty Hinge - Urban Expression And Depression - [...] Empty width and height attributes prevent image rendering in IE | Scott Bush [...]
  2. Some images have not been appearing in IE | Roman in Ukraine - [...] Curious visitors can read more about it here. [...]

Leave a Reply

You must be logged in to post a comment.