Skinny images in Safari

It seems that some of the images on Clagnut are being rendered as skinny strips in Safari 1.2. (Thanks to Andy for pointing this out.) Here’s an example:

It looks fine in all my modern Windows browsers but in Safari 1.2, the image is squashed to about 20px wide. I don’t have access to earlier versions of Safari so I’m not sure if this issue has crept in just recently, but no one has complained up until now. Can anyone elucidate?

The difference between this image and others on the page (such as the random photo at the top) is that this one is contained within a floated paragraph. Neither the paragraph nor the image have widths set. Here’s all the CSS affecting the image, complete with drop shadow effect:

.{
  margin:1em 1em 0 0 !important;
  text-indent:0;
  position:relative;
  left:5px;
  top:-5px;
  background: url(/images/drop.png) bottom right;
  float:left;
  line-height:0;
}

.IMG {
  background:#fff;
  padding:4px;
  border:1px solid #a9a9a9;
  position:relative;
  left:-5px;
  top:-5px;
  max-width:100%;
}

Now, I know that widths are supposed to be set when floating elements but the style sheet validates with no errors or warnings and it works in all the other browsers. And why render the image 20px wide? Why not 100% wide thereby ignoring the float?

Update: Philippe has confirmed my suspicions that max-width:100% applied to the image is the problem. The max-width property was there to automatically shrink the image if it was too big for the column. I’ll investigate other ways of doing this but in the meantime I’ve removed the max-width and everything now looks fine. Thanks for all your contributions.