Extra White Space Appearing Only On IE8

I've been doing some cross browser testing for a webpage I'm working on for a client, and things are going pretty smoothly so far. However, I'm noticing a lot of white space showing up only in IE8 at the bottom of my #main div. I've tried removing the padding at the bottom of the div using an IE8-spec开发者_开发百科ific stylesheet, but it's not removing the gap. Developer toolbar shows that the style is being applied, and before trying the IE8-specific sheet, I removed the padding via the developer toolbar and it worked fine, but once applying the actual style it doesn't. I'm not seeing this bug in any other browser, and so far I've tested with: Firefox (OS X/Win XP), Safari (OS X/ Win XP), Chrome (OS X/Win XP), Internet Explorer 7, and Internet Explorer 8. I've also tried negative margins, and just moving the boxes down so there's less of a gap on both sides. Neither seem to move the boxes at all. So, its a bit confusing. Here's a pic of it in IE 8:

And here's how it shows up in any other browser (this screenshot is from IE 7):

The site can be browsed live here.

Any help is greatly appreciated!

@David Savage: Putting in

<!--[if IE 8]>
<style type="text/css">
    #small_boxes {
      overflow: hidden;
      padding-bottom: -150px;
    }
</style>
<![endif]-->

Just before your closing </head> fixes the issue for me.