Image Float working IE7 but not in FF

CMS loades in images to a div. Images float left yet second line indents.

[solaris07]

I am having a problem with FF indenting the second row of images. All images are loaded in through a CMS. The images are then all floated left with a 3px padding and a 3px margin inside a container that is 750px wide.

However in IE there is no indent in the second row and the images show up correctly.

Any suggestions?

Here is the HTML Code

<div id="thumbnailcontainer">
<div class="thumbnail">

<a href="images/gallery/1.JPG" target="_blank"
title="1.JPG" rel="lightbox[Gallery]"><img src="images/gallery/1.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/2.JPG" target="_blank"
title="2.JPG" rel="lightbox[Gallery]"><img src="images/gallery/2.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/3.JPG" target="_blank"
title="3.JPG" rel="lightbox[Gallery]"><img src="images/gallery/3.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/4.JPG" target="_blank"
title="4.JPG" rel="lightbox[Gallery]"><img src="images/gallery/4.JPG" width="150 height=113"'" /></a>

</div>
<div class="thumbnail">
<a href="images/gallery/5.JPG" target="_blank"
title="5.JPG" rel="lightbox[Gallery]"><img src="images/gallery/5.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/6.JPG" target="_blank"
title="6.JPG" rel="lightbox[Gallery]"><img src="images/gallery/6.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/7.JPG" target="_blank"
title="7.JPG" rel="lightbox[Gallery]"><img src="images/gallery/7.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/10.JPG" target="_blank"
title="10.JPG" rel="lightbox[Gallery]"><img src="images/gallery/10.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">
<a href="images/gallery/8.JPG" target="_blank"
title="8.JPG" rel="lightbox[Gallery]"><img src="images/gallery/8.JPG" width="150 height=113"'" /></a>
</div>
<div class="thumbnail">

<a href="images/gallery/9.JPG" target="_blank"
title="9.JPG" rel="lightbox[Gallery]"><img src="images/gallery/9.JPG" width="150 height=113"'" /></a>

</div>
</div>

Here is the CSS for the DIVS
#thumbnailcontainer {
width:750px;
margin-left:100px;
}

div.thumbnail{
float: left;
margin: 3px;
padding: 3px;
}

div.thumbnail img{
width: 150;
padding: 0px;
margin: 0px;
}

div.thumbnail a{
padding: 0px;
border: none;
margin: 0px;
}

[solaris07]

I figured it thanks to a post by swa66. The images need to have a height set. I saw about 3 other posts with this isssue after I posted. While this makes it work, it sucks because not all the images uploaded through the CMS will have the same height but eh, thats have the fun of being a web designer.

[swa66]

To have a bunch of thumbnails on a page.

I found it easiest if they all have the same height, or if I knew up front where they would wrap to a next line (you can then clear the floats).

Not knowing anything gives you the effect that the browser shifts the float down till it fits, and doesn't return for sure to the far left.

I'm not sure you can get it done in all browsers, but an avenue to try would be inline/inline-block displaying to make the blocks behave more like text.

BTW: you have some html errors in your sample code: the size of the images has the quotes out of place.