Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007

I'm making a Javascript program that uses overflow:hidden on a containing
div to crop an image. This page (temporarily) shows an example of what I
mean:

http://www.people.fas.harvard.edu/~night/crossroads/

The relevant markup is:

<div style="overflow:hidden; width: 238px; height:47px;
  border: thin yellow solid;">
<img src="hidden-overflow.png" alt="hidden overflow!"
  style="width:294px; height: 47px;">
</div>

In a CSS2-compliant browser, you'd see part of the image; in IE (both 6
and 7) you see the whole thing. Strangely enough, though, it does properly
crop text. So I'm hoping there's some workaround, some hack or quirks-mode
setting to get it to work. Right now the best thing I've got for IE users
is an iframe, blah.

I searched this newsgroup, and I found a couple of mentions of this
problem, but no solution. I hope I'm not being tiresome.

Thanks,
Christopher

PS: Sorry that I'm using CSS in such a bizarre way with this program. I
really do believe in the CSS "philosophy" and I use it accordingly in my
actual web documents! This is the exception.