add_image_size not cropping from left top

I’m trying to hard crop images (315px by 600px) on my custom theme WordPress site so that the left top of the image appears on my main page (and the full image is used on the individual post pages). However, the images still appear centered. In my functions file I am using:

    function invadingholland_setup() {

    add_theme_support('post-thumbnails');
    add_image_size('post-cartoon', 200, 200, array('left', 'top'));

    } 

    add_action('after_setup_theme', 'invadingholland_setup');

…and in my loop I am using:

    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail-cartoon'); ?></a>
    </div>

… and then this CSS around it:

    .post-thumbnail {
    margin: 0px 10px 0px 0px;
    width: 200px;
    height: 200px;
    float: left;
    text-align: left;
    border: 1px;
    border-style: solid;
    border-color: #000;
    }

…and I’ve tried regenerating all my images. If I play around with the sizes in my add_image_size code I do see a change but noting changes if I put different values into the array. I’ve also confirmed with my hoster that I have php-gd.

And just to make things even stranger it works as it should on my local test server on my laptop but not on the real site.

I’m stomped as to why it is not working. Am I missing a java script? Is it a wordpress setting? Can anyone help? An example of the problem can be seen here: https://www.invadingholland.com in my top two posts.

Thanks