title: PhoneGap jQuery mobile multiple html files css not working
body: <p>I have implemented a <strong>Phone Gap application using jQuery Mobile and java script</strong> for iPhone and android. </p>
  
  <p><em>My app is almost completed.</em></p>
  
  <p>Till now I used <strong>single index.html file for all the pages</strong>.</p>
  
  <p>Now I need to use <strong><code>different html files for different pages.</code></strong></p>
  
  <p>So I have created <strong>multiple external html files</strong> for different pages, linked the references and added them in to www folder.</p>
  
  <p>in that the i have a list view its css not visable</p>
  
  <p><img src="https://i.stack.imgur.com/zrN1V.png" alt="enter image description here"></p>
  
  <p><strong>Main Page:-</strong> See <strong><code>page2</code></strong> and <strong><code>page3</code></strong> ref in <strong>index.html</strong> file </p>
  
  <pre><code>&lt;div data-role="content"&gt;
      &lt;ul data-role="listview" data-theme="e" data-header-theme="a" data-dividertheme="a" id="List view"&gt;
          &lt;li data-role='list-divider' &gt;&lt;big&gt;Lis view&lt;/big&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='#page1' id='Page1' data-panel='main'&gt;Page1 Information&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='page2.html' rel="external" id='pagetwoid' data-panel='main'&gt;Go to Page 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href='page3.html' rel="external"  id='pagethreeid' data-panel='main'&gt;Go to Page 3&lt;/a&gt;&lt;/li&gt;                             &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Page2:-</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
       &lt;head&gt;
            &lt;title&gt;Multiple htmls&lt;/title&gt;
  
            &lt;meta id="viewport" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;
  
            &lt;!--
            &lt;link rel="stylesheet" href="inc/jquery.mobile-1.0.1.min.css" /&gt;
            &lt;link rel="stylesheet" href="inc/jquery.mobile.splitview.css" /&gt;
            &lt;link rel="stylesheet"  href="inc/jquery.mobile.grids.collapsible.css" /&gt;
            &lt;link rel="stylesheet" href="inc/jquery.mobile.structure-1.0.1.min.css" /&gt;
            --&gt;
            &lt;link rel="stylesheet" href="inc/jquery.alerts.css" /&gt;
            &lt;link rel="stylesheet" href="inc/jquery.mobile.datebox.css" /&gt;
            &lt;script charset="utf-8" src="cordova-1.9.0.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="inc/jquery-1.7.1.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="inc/jquery.mobile.splitview.js"&gt;&lt;/script&gt;
  
  
            &lt;script type="text/javascript" src="inc/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="inc/jquery.alerts.js"&gt;&lt;/script&gt;
            &lt;script type="text/javascript" src="inc/iscroll-wrapper.js"&gt;&lt;/script&gt;
  
            &lt;script type="text/javascript" src="inc/iscroll-lite.js"&gt;&lt;/script&gt;
  
            &lt;script type="text/javascript"&gt;
                             alert('js Loadfed');
                 &lt;/script&gt;
  
            &lt;style&gt;
                 alert();
                 alert('css loaded');
  
                 &lt;/style&gt;
  
       &lt;/head&gt;
  
       &lt;body&gt;
  
  
            &lt;!--============= Page2 ===============---&gt;
            &lt;div data-role="page" id="siteContacts" data-theme="e"  &gt;
                 &lt;div data-role="header"&gt;
                      &lt;h1&gt;Page 2 &lt;/h1&gt;
                      &lt;a href="page2.html" id="EditButton" data-role="button" data-icon="gear" class="ui-btn-right" data-theme="e" &gt;Edit&lt;/a&gt; 
                 &lt;/div&gt;
  
                      &lt;div data-role="content"&gt;
                           &lt;ul data-role="listview" data-inset="true" class="ui-listview" data-dividertheme="a"&gt;
  
                                &lt;li data-role="list-divider"&gt; &lt;!--list Header ---&gt;
                                     &lt;div class="ui-grid-c"&gt; &lt;!--Section Headers Grid---&gt;
                                          &lt;div class="ui-block-a" &gt;&lt;big&gt; aaaa&lt;/big&gt; &lt;/div&gt;
                                          &lt;div class="ui-block-b" &gt;&lt;big&gt; bbbb&lt;/big&gt; &lt;/div&gt;
                                          &lt;div class="ui-block-c" &gt;&lt;big&gt; ccc&lt;/big&gt; &lt;/div&gt;
                                          &lt;div class="ui-block-d" &gt;&lt;big&gt; e-sss&lt;/big&gt; &lt;/div&gt;
                                     &lt;/div&gt;
  
                                &lt;/li&gt;
                                &lt;/ul&gt;
                           &lt;/div&gt;
  
  
  
  
       &lt;/body&gt;
       &lt;/html&gt;
  </code></pre>