Problem with get_posts

I’m adapting the HTML5 boilerplate wordpress theme and this HTML5 layout for a new site I want to build. Part of it so that I can expand my WordPress skills, so yes, I’m trying out some somewhat advanced techniques. But I’ve come across a wierd problem that I can’t figure out.

I based the following on this (get_post with offset

So I have this:

<ol id="archive-post-list"><!--list of posts-->
<?php
 $postslist = get_posts('numberposts=3&offset=4');
 foreach ($postslist as $post) :
    setup_postdata($post);
 ?>

			<li><article>
				<header>
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></h2>
				</header>
				 <?php the_excerpt(); ?>
				 <footer>
				<p><time datetime="<?php the_time('Y-m-d')?>"><?php the_time('F jS, Y') ?></time> | <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
				</footer>
			</article></li>	

			<?php endforeach; ?>
</ol>

Seems pretty straight-forward. Now look at the source that WP sends back to me:

<ol id="archive-post-list"><!--list of posts-->

			<li><article>
				<figure class="float">
				<!-- make this the SMALL featured image section later -->
								</figure>
				<header>
				<h2><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Hello world!</h2>

				</header>
				 <p>this is my excerpt</p>
				 <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
				<footer>
				<p><time datetime="2010-11-12">November 12th, 2010</time> | <a href="http://richardmtl.ca/?p=1#respond" title="Comment on Hello world!">No Comments »</a></p>
				</footer>

			</article></li>	

			</ol>

Again, looks great, no problems there.

However, the behaviour of this section in the browser (whether it be FF, IE, Chrome, Opera or Safari, the result is always the same) is completely different, and I can’t figure it out.

Look at what Firebug gives me (and this source represents what I acutally see happen in the browser):

<ol id="archive-post-list"><!--list of posts-->

			<li><article>

				<header>
				<h2><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Hello world!</a></h2>
<a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">				</a></header>
<a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">				 </a><p><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">this is my excerpt</a></p>
<a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">				 </a><p><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</a></p>
<a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">				<footer>
				</footer></a><p><time datetime="2010-11-12"><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!">November 12th, 2010</a></time><a href="http://richardmtl.ca/?p=1" rel="bookmark" title="Permanent Link to Hello world!"> | </a><a href="http://richardmtl.ca/?p=1#respond" title="Comment on Hello world!">No Comments »</a></p>
				</article>
			</li>	

			</ol>

See what I mean? Just a whole bunch of extra links for some reason. I don’t get it, since it’s not even represented in the source anywhere. How can Firebug and the browsers see this, but “View Source” doesn’t show it? And what did I do to cause this? I don’t get it at all.

Can anyone help me out? 🙂

Thanks!