Firefox columns in css3

Problem

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">
        <a href="#"><img src="img/arrow_up_alt1_32x32.png" class="overlay overlay1" /></a>
        <a href="#"><img src="img/fullscreen_32x32.png" class="overlay overlay2" /></a>
        <a href="#"><img src="img/heart_fill_32x38.png" class="overlay overlay3" /></a>
        <?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;
}
Problem courtesy of: user1779816

Solution

.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.

Solution courtesy of: joequincy

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.