Writing up a bug

I wrote some pages this week which included a list of items with a left floated image per list item. So I had markup like this:

<ul id="thisList">
<li><h2>Heading for first item</h2>
<div><img src="i/image1.jpg" width="106" height="106" alt="[second image]"><h3>Subheading for first item</h3>
<p>A paragraph of description</p>
<p>A second paragraph.</p>

<h2>Heading for second item</h2>
<div><img src="i/image1.jpg" width="113" height="98" alt="[this image]">
<h3>sub heading</h3>
<p>A paragraph</p>

As the width of the images varied, I defaulted to the following css:
ul#thisList div img, ul#thisList li img {
float: left;
width: auto;

But in IE, an interesting thing happened. On first load, some of these images were coming up fatter, or wider, than they should have been.
Sometimes it cleared on refresh, but sometimes it didn’t, and it didn’t happen for every image, but only some of them. (There are around a dozen items in this list)
At first I thought I had simply not gotten the img element width correct, but they were set the right values.
Then when I thought about it more, I wondered if it was something with the CSS.
What I have decided was to blame was the width: auto.
I have now changed the markup and made it ‘nasty’, ala:
<div><img style=”width:113px;” src=”i/image1.jpg” width=”113″ height=”98″ alt=”[this image]”>
on the grounds that this is lower maintenance than putting a unique id every image and maintaining it in a separate css file.
Keeping the figures near each other is as near as I can get to once and only once, given that I believe all img elements should have width and height attributes.

So, IE sometimes does wierd things with image widths when the image has a style of width: auto assigned.
Am I sure of this? Not 100%, no, hard to say an intermittent problem is fixed when it stops showing up, and I think IE was eventually able to decide the correct figure for the image when it had it cached.
But time will tell – this is a high involvement project, so I will have user feedback.