title: jQuery Mobile on PhoneGap - List Example Looks bad, components overlaps
body: <p>I just downloaded PhoneGap to try it. I made an XCode Project and it's working alright.  Then, I wanted to try some jQuery Mobile on it, so added this to the default Hello World Page of Cordoba: </p>
  
  <p>I added, to the <strong>head</strong>:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And then on the <strong>body</strong>: </p>
  
  <pre><code>&lt;ul data-role="listview" data-inset="true" data-filter="true"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Acura&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Audi&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;BMW&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I thought it would go fine, but look how it comes out:</p>
  
  <p><img src="https://i.stack.imgur.com/E3OWU.png" alt="enter image description here"></p>
  
  <p>Here's all the code in case you want to take a look at it. Am I doing something wrong?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;meta name="format-detection" content="telephone=no" /&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css" /&gt;
          &lt;title&gt;Hello World&lt;/title&gt;
  
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;h1&gt;Apache Cordova&lt;/h1&gt;
              &lt;div id="deviceready" class="blink"&gt;
                  &lt;p class="event listening"&gt;Connecting to Device&lt;/p&gt;
                  &lt;p class="event received"&gt;&lt;a href="#" id="devReadyAnchor"&gt;Device is Ready&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;ul data-role="listview" data-inset="true" data-filter="true"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Acura&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Audi&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;BMW&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
  
          &lt;script type="text/javascript" src="cordova-2.7.0.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              app.initialize();
          &lt;/script&gt;
      &lt;/body&gt; &lt;/html&gt;
  </code></pre>