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!)