JQuery Mobile navbar not sizing properly

I'm trying to make a really simple page using JQuery Mobile (it's my first time really playing with it). I can't seem to get the navbar to display properly. The code on the JQuery Mobile page looks dead simple and as best I can tell, I'm copying it verbatim. It displays like this though...

Here's my code (also, FYI, theme.css file is the default JQuery css file):

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="../css/theme.css" />
      <script src="../js/jquery-1.9.1.min.js"></script>
      <script src="../js/jquery.mobile-1.3.0.min.js"></script>

      <script type="text/javascript" src="../js/maptest.js"></script> 


      <div data-role="page" id="main">
        <div data-role="header">
           <div data-role="navbar">
                 <li><a href="#" class="ui-btn-active ui-state-persist">Test</a></li>
                 <li><a href="#">Test</a></li>
                 <li><a href="#">Test</a></li>

        <div data-role="content">
           <ul data-role="listview"> 

        <div data-role="footer">




Add the following to your page:

 <code><meta http-equiv="X-UA-Compatible" content="chrome=1"></code>

It seems you're loading in IE. This page loads the Chrome frame activex in the IE page to render webkit stylesheet directives used by JQuery.

You should also seriously consider placing the navbar inside the content div.

Need Your Help

Is there a command in Vimscript to get the current Operating System?

vi vim

What the title says. I can think of some hackish ways to do it, but is there a correct way to do this?