IE and dividing images

[copes]

Hello,

I'm having trouble with IE adding random space above and below a 1px wide image i'm using to finish off a section of floating elements.

html:

<div class="productrange">
	<div class="productline">
	<div class="productitem">x</div>
        <div class="productitem">x</div>
        <div class="productitem">x</div>
        <div class="productitem">x</div>
        <div class="productitem">x</div>
        <img src="img/testsquare.gif" width="770" height="1" />
	</div>
</div>

css:

.productrange {margin-bottom:30px;} /* outer container */
.productline {width:770px; background-color:#c4c4c4; background-image:url(../img/white.gif); background-repeat:repeat-y;} /* each line of 5 */
.productitem {width:131px; margin:0px 0px 1px 1px; background-color:#fff; padding:11px; float:left;} /* individual items */

If anyone could suggest a fix that would be great

[Fang]

img {vertical-align:bottom;}