Tumblr Note Showing Extra Blank Element Before R

Question

I am coding a new theme for Tumblr and am currently working on the permalink page. I want to display the individual reblogs, likes and replies underneath, but the page keeps displaying an extra blank list element before the rest of the notes. It also ignores the styling I did to the the list element I created in the CSS.

This is what the page looks like.

Here's the CSS:

.pagenotes{
    float:left;
    width:700px;
    height:auto;
    padding:15px;
}

ol.notes{
    float:left;
    width:100%;
    font-size:16px;
}

ol.notes li.note{
    background:{color:Post Color};
    margin:5px;
    padding:5px;
    list-style-type:none;
}

ol.notes li.note img.avatar{
    vertical-align:middle;
    margin-right:5px;
}

Here's the HTML:

<div class="pagenotes">
    {block:PermalinkPage}
        {block:PostNotes}
           <li>{PostNotes-16}</li>
        {/block:PostNotes}
    {/block:PermalinkPage}
</div>

What's wrong and how do I fix it?

UPDATE: I changed the li tag to ol and it worked fine.