jquery infinitecarousel plugin, and dynamically loading overlapping data not working correctly

Question

I'm using version 3.02 of the infinite carousel plugin from here

to help me assemble some notes based on data from a db. My problem is that the carousel left and right arrows do not show up, and I do not think the carousel effect is happening. Here is how I am assembling my data:

<ul class="carousel">
<?php
while ($rows = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $url = htmlspecialchars($rows['stationery']);
        $message = htmlspecialchars($rows['message']);
        echo "<li id=\"load_message\" style=\"background: url($url) no-repeat;\">";
        echo "<div id=\"message\">" . nl2br($message) . "</div>";
        echo "</li>";
    }

I see the background image with the text overlaid fine, but there are two problems: the first is that the first image is displayed about 30 pixels lower than the second image. The second problem is that I don't think the carousel plugin is being loaded and I don't see the left and right arrows. I've looked in the NET tab of Firebug and it shows right.png and left.png being loaded. I load the plugin in the head of my doc, after jquery:

<script type="text/javascript" src="js/jquery.infinitecarousel3.min.js"></script>

And this is how I am evoking it:

$(document).ready(function() {
    $('.carousel').infiniteCarousel({
        imagePath: 'images/examples/',
        transitionSpeed: 300,
        displayTime: 6000,
        internalThumbnails: false,
        thumbnailType: 'buttons',
        progressRingColorOpacity: '0,0,0,.9',
        progressRingBackgroundOn: false,
        margin: 10,
        easeLeft: 'linear',
        easeRight: 'linear',
        inView: 2,
        advance: 1,
        autoPilot: false,
        prevNextInternal: false,
        autoHideCaptions: false
    });
});

and lastly the css:

.carousel ul {
    height: 300px;
    width: 710px;
}

li#load_message {
    display: inline-block;
    margin-left: 30px;
    height: 390px;
    width: 290px;
    position:relative;
}


#load_data {
    width: 710px;
    height: 460px;
}


#message {
    margin: 40px 10px 10px 30px;
    z-index:99;
    position:absolute;
    top: 30px;
    left: 100px;
}