White space between header and content

When adding the code to generate the page content into my template, then a white space appears between my header and content area, please see url

http://www.birthdaymagiciannyc.com/corporate/

the template code for this page is

<?php /*
 Template Name: template1*/ ?> 

<?php get_header(); ?>

    <div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php endwhile; endif; ?>
    </div>
<?php get_sidebar(); ?>

<?php get_footer(); ?> 

</div>

When I remove the code for the page post, then it looks fine (obviously without content thought) like here

http://www.birthdaymagiciannyc.com/bio/

the code for this is

<?php /*
 Template Name: template2*/ ?> 

<?php get_header(); ?>

    <div id="content">
    </div>
<?php get_sidebar(); ?>

<?php get_footer(); ?> 

  </div>

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

So obviously wordpress generates a white space between my header and content div when the code for a page post is added.

This is driving me crazy and I do not know what do about it. Could you please help?

Thank you
Eva