Jquery masonary formatting changes after ajax update

I'm using the masonary jquery plugin to format images loaded into my page via ajax.

It's all working perfectly except for when images are loaded in through ajax, they seem to gain extra margin/padding values from nowhere and do not fit seamlessly like the images already on the page. I've tried adding margin:0; padding:0; but nothing seems to work

All my code is currently live here: http://1hype.me/

Any ideas are greatly appreciated!

EDIT:

The problem is occurring on everything i've tested, Safari, Chrome & FF (mac)

Here's a screenshot that explains it a bit more: http://cl.ly/0d0q37290W1r0j0X2g0c

This is due to whitespace.

You could just return the image from the ajax call (without any script)

and just run

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* prepend the results 
             results is just the image (without whitespace around it) */
            imgHolder.prepend(results);
            /* fade in the first image (the one we just prepended)*/
            imgHolder.find('img:first').fadeIn(1100);
            /* do the masonry thing.. */
            imgHolder.masonry({ singleMode: true });
        }
    });
}

if that is not an option (altering the fetch_image.php) then you can use

function fetch() {
    //autoupdater
    $.ajax({
        type: "POST",
        url: "ajax/fetch_image.php",
        cache: false,
        data: "after=000000",
        success: function(results){ 
            var imgHolder = $('#image_holder');
            /* exclude text whitespace nodes (not included in a tag).*/
                        var $results = $(results).filter(function(){return this.nodeType != 3});
            imgHolder.prepend( $results.eq(0) );
            $('body').append( $results.eq(1) );
        }
    });
}