JQuery DataTables Pagination Text Display Is Off

Question

I have set-up the JQuery DataTables on my site, however the text for Search and Records per page is displaying off. This image shows how the demo on the site shows it will be displayed

however, when I have everything set-up on my site, this is the display that I get

What do I need to change so that my site displays the same as the demo?
Edit This is the syntax I am using to populate the HTML table

$query = $db->getQuery(true);
$query = "SELECT vendorname, vendorid from vendorlist";
$db->setQuery($query);
$query = $db->loadObjectList();
if ($query)
{
?>
<div id="dvData">
    <table id="example" border="1" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Vendor </th>
        <th>Vendor ID </th>
    </tr>
    </thead>
    <?php
    foreach ($query as $res) 
    {
        print "<tr>";
        print "<td>" . $res->Vendor . "</td>";
        print "<td>" . $res->VendorID . "</td>";
        print "</tr>";
    }
}
?>
</table>
</div>
</html>