Firefox columns in css3 - firefox

Question

Here is the link to my site that I'm building:
http://joshrcook.com/test
I'm having trouble getting the pictures to touch top and bottom without messing up firefox's columns. I can float the images left, but that seems to break -moz-column-count. Any ideas?
Here is the html for the pictures:
<div id="img-wrapper">
<?php for($i = 1; $i <=25; $i++) { ?>
<div class="photo">
<img src="img/arrow_up_alt1_32x32.png" class="overlay overlay1" />
<img src="img/fullscreen_32x32.png" class="overlay overlay2" />
<img src="img/heart_fill_32x38.png" class="overlay overlay3" />
<?php echo '<img src="img/tumblr_img_' . $i . '.jpg" class="main_photo" />'; ?>
</div>
<?php } ?>
</div>
And here is the CSS:
#img-wrapper {
width: 960px;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.photo {
width: auto;
position: relative;
width: 320px;
}
.photo a img.overlay {
position: absolute;
z-index: 10;
top: 0;
left: 0;
}
.photo a img.overlay1 {
left: 25%;
}
.photo a img.overlay2 {
left: 45%;
}
.photo a img.overlay3 {
left: 65%;
}
.photo img.main_photo {
width: 320px;
border-radius: 10px;
}

Answer 1

.photo {
width: auto;
position: relative;
width: 320px;
margin-bottom: -5pt;
}
The above seems to work great in Chrome (release) and IE9. I don't have other browsers to test with on this machine, but I'd start there.
Also possibly it could be because of how the browsers are interpreting your whitespace (margins/padding all look like they're set at 0, so the problem shouldn't be there. Try eliminating whitespace within every <div class="photo"></div> and see what that does.