Blog Posts on Static Homepage

Hi all,

This might be a bit of a difficult one, I am using WordPress in a sub folder and pulling 3 most recent blog posts in from WordPress.

The problem is, the 3 blog posts are added to an <article> each but the first <article> does not have a class and the remaining 2 <article> posts have the wrong classes/id’s. The 2nd <article> has the id of the first and the 3rd <article> has the id of the second (if that makes sense).

Here is the code used to pull in the posts to the static homepage:

<?php require('blog/wp-blog-header.php');

query_posts('showposts=3');
if ( have_posts() ) {
	while ( have_posts() ) { ?>

    		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

			<?php the_post(); ?>
            	<p class="date"><?php the_time('F j, Y') ?></p>
			<?php if ( has_post_thumbnail()) : ?>
   				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="featured-image-homepage" >
			<?php the_post_thumbnail(); ?>
   				</a>
			<?php endif; ?>
            	<div class="entry-meta">
                	<span class="cat-links"><?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?></span>
                </div>
				<h3 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <div class="entry-summary">
                	<?php short_excerpt(get_the_excerpt(), get_the_ID()); ?>
                </div><!-- .entry-summary -->

           	</article>
<?php
	}
}
?>

Does anyone have an idea what is going on here?

Here is a link to a test page. If you look at the source you can see what I mean by the first post does not have a class or proper id.