Thursday, February 12, 2009

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"
style="border-color: blue; border-width: thin; border-style: solid;
padding: 2px;"/>