firefox image scaling and line artifacts

I'm still at a loss why image scaling in firefox exhibits line artifacts with certain images at certain scaling values.

The first pink bar image scales fine.

The second pink bar image, with a black smudge in the upper left corner, doesn't scale fine. At 50%, grey lines show up at the left and top borders of the image.

What gives? What next steps should I take? Stuff I have/haven't tried:
- haven't been able to try this on a windows box so am unable to tell if it's some sort of X windows issue.
- tried it running X remotely on a sparc box and the same lines show up
- the page looks fine in opera
- tried jpeg, gif, png - same artifact occurs in each case


XHTML and images are at: http://dathomp1.googlepages.com/

IMG 'width' tag and firefox rendering of png images

When firefox (3.0.6) renders a png image at certain widths (e.g., 50%), a thin grey line is shown along the left and top edges of the content box. The line disappears at other widths (e.g., 70%). Furthermore, the line doesn't seem to be present in the original image (using gimp to inspect the image).

The phenomenon occurs in the absence of the CSS style markup -- in the HTML example below, the CSS is present to clarify where the grey lines are located -- it seems clear that the grey lines are appearing at the very edge of the content box itself.

I have a hard time imagining this is a bona fide firefox bug and am wondering what concept I'm overlooking or not grasping...

Thanks for your time and any suggestions/thoughts...

Below are the: (1) original image, (2) the image with the grey line (width 50%), and (3) the image w/o the grey line (width 70%)...

The html:

...
<div style="border-color: red; border-width: thin; border-style: solid;
      padding: 2px">
<img src="http://path/to/original.png"
    width="50%"
    style="border-color: blue; border-width: thin; border-style: solid;
    padding: 2px;"/>    
</div>
...

Original: