So I have a normal loop that you can see here:

<?php if ( have_posts() ): ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <article>
      <div class="featured-image"><?php the_post_thumbnail(); ?></div>
        <div class="blog-date">
          <div class="date"><?php the_time('M, j') ?></div>
          <p class="tahoma-low"><?php comments_number('0', '1', '%'); ?></p>
        </div>
        <div class="post-info">
                <h2><a href="<?php esc_url( the_permalink() ); ?>" title="Permalink to <?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <hr />
        <p class="photo-credit tahoma-low">photo courtesy whomever 2012</p>
        <p class="excerpt"><?php the_excerpt(); ?></p>
        <a href="<?php esc_url( the_permalink() ); ?>" ><img src="<?php echo get_bloginfo('template_directory');?>/images/contactMeTape.png"></a>
      </div><!--POST INFO END-->
    </article>
  <?php endwhile; ?>

<?php else: ?>
  <h2>No posts to display</h2>
<?php endif; ?>

What happens is the latest blog posts title and read more button do not work. I figured it is just the permalinks but I have NO IDEA what it could be. I tried tones of google searches but with no luck. Any help would be amazing. I cannot upload this because it is being developed locally so sorry about that.

EDIT: Also When there is only one blog post the permalinks work fine. Another big thing is that when I inspect the element that should have the link, it shows it has a link but you cannot click it.