Variable floating oddly - html

Question

I have a problem with an unordered list when I insert a variable inside an image.
Please have a look at this fiddle.
So basically, what I get here is a list of images, centred and floated to the left, with left alignment on new lines as well.
In Jsfiddle I used a random image. When I copy this code exactly as it is into my code it works fine. When I swap the random image to a PHP variable the whole list jumps around and it looks very bad. Allow me to illustrate what I see with a PHP variable inserted:
I have no idea why this becomes like this. Here is my code with the PHP variable:
<div class="snaps-wrap">
<ul>
<?php
//Here is php code which works fine
?>
<li>
<a href="#">
<img id="snap-img" src="<?php echo $snappic?>" alt="">
</a>
</li>
<?php }
}
?>
<p style="clear: both;"></p>
</ul>
</div>
Here is CSS:
.snaps-wrap {
width: 70%;
margin: 0 auto;
padding: 0;
}
.snaps-wrap ul {
padding: 0.5em 0;
text-align:center;
margin:0 auto;
background:#ddd;
list-style: none;;
}
.snaps-wrap ul li {
float: left;
width: 25%;
margin: 0.5em 0;
}
#snap-img {
width: 150px;
}
As I mentioned, with the image used in jsfiddle this works fine, as soon as I change the image source to my variable it becomes misplaced.
Any ideas why this happens and how to fix this?