Yesterday I put up this demo in my personal sandbox, patted myself on the back, and went to bed.

Today I had the good/bad fortune to see the result on the World's Favorite Browser. Yeurghh. Well, all right, I should have remembered that the page (not written by me but only fiddled with by me) was in XHTML and explicitly closed an IMG tag, but otherwise all had seemed well.

Today I played with it, producing this replacement, luridly colored for diagnostic purposes. Coloring aside, it looks fine in Firefox and Safari. In MSIE (whatever comes with Vista), you only see a thin (topmost) strip of the photo; the rest is a blank.

Putting MSIE in what its designers fondly think is standards mode doesn't help. I tried invoking the XHTML Strict DTD but that made no difference.

The page comes with a ginormous payload of CSS, but I don't think any of the stuff in external stylesheets is relevant. You can see the relevant material within the STYLE tag, and there's an easily digestible amount of it.

What I want to do strikes me as pretty simple. So where's the goof, or what's the kludge?

"The photo" sounds like this happens to only one specific image. Which?

This must be an IE7 thing, because the page looks the same in IE6 and K.Mel, as does the first page.

Strange. I see what you mean: just now I looked at both pages with MSIE 5.5 for Windows and yes, they look pretty much as they do in Firefox and Safari: there's no reason to moan at Microsoft about anything. But whatever the problem is, it doesn't seem to be specific to an image: the two pages have different images yet both images are mostly hidden by MSIE 7 or whatever it is that's on the Vista machines in two of our offices.

Obviously I don't have IE7 so I can't test, but have you tried the things that usually do it for IE? Or did before 7 anyway. Like position relative, an explicit hight (like 1%, IE will push the box higher anyway, again I don't know about IE7). Try that on the image container probably.