title: jquery mobile navbar add unknown button
body: <p>I have search for this problem for over 2 hours and i dont understand why something so simple doesn't work.</p>
  
  <p>I try to implement a navbar in my footer but i dont know why jquery add some buttons and the layout becomes horrible.</p>
  
  <p>This is my code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;title&gt;VeryGoodTrip&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt; 
      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;   
  &lt;/head&gt; 
  &lt;body&gt;  
      &lt;div data-role="page"&gt;
          &lt;div data-role="header"&gt;
              &lt;h1&gt;Destinations&lt;/h1&gt;
          &lt;/div&gt;&lt;!-- /header --&gt;
  
          &lt;div data-role="content" data-theme="c"&gt;
              &lt;ul data-role="listview"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/corse.png" /&gt;
                      &lt;h3&gt;Corse&lt;/h3&gt;
                      &lt;p&gt;Corse&lt;/p&gt;
  
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/golf.png" /&gt;
                      &lt;h3&gt;Golf du Lyon&lt;/h3&gt;
                      &lt;p&gt;Golf du Lyon&lt;/p&gt;
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/lerins.png" /&gt;
  
                      &lt;h3&gt;Iles de lerins&lt;/h3&gt;
                      &lt;p&gt;Iles de lerins&lt;/p&gt;
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/menton.png" /&gt;
                      &lt;h3&gt;Menton&lt;/h3&gt;
                      &lt;p&gt;Menton&lt;/p&gt;
  
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/monaco.png" /&gt;
                      &lt;h3&gt;Monaco&lt;/h3&gt;
                      &lt;p&gt;Monaco&lt;/p&gt;
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/nice.png" /&gt;      
                      &lt;h3&gt;Nice&lt;/h3&gt;
                      &lt;p&gt;Nice&lt;/p&gt;
                  &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;
                      &lt;img src="img/tropez.png" /&gt;
                      &lt;h3&gt;Saint-Tropez&lt;/h3&gt;
                      &lt;p&gt;Saint-Tropez&lt;/p&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /content --&gt;
  
          &lt;div data-role="footer" data-position="fixed"&gt;      
              &lt;div data-role="navbar" data-iconpos="right"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index.html" data-icon="refresh" class="ui-state-persist ui-btn-active"&gt;Destinations&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.html" data-icon="refresh"&gt;Activités&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="index.html" data-icon="refresh"&gt;Planning&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- /navbar --&gt;
          &lt;/div&gt;&lt;!-- /footer --&gt;
  
      &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>And this is what i get with firebug :</p>
  
  <pre><code>&lt;div data-position="fixed" data-role="footer" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay" role="contentinfo" style="top: -155px;"&gt;
      &lt;a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a"&gt;
          &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
              &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
          &lt;/span&gt;
      &lt;/a&gt;
      &lt;div data-iconpos="right" data-role="navbar" class="ui-navbar" role="navigation"&gt;
          **&lt;a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"&gt;
              &lt;span class="ui-btn-inner"&gt;
                  &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
              &lt;/span&gt;
          &lt;/a&gt;**
          &lt;ul class="ui-grid-c"&gt;
              &lt;a href="index.html" class="ui-block-a ui-btn ui-btn-icon-right ui-btn-up-a" data-theme="a"&gt;
                  &lt;span class="ui-btn-inner"&gt;
                      &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/a&gt;
              &lt;li class="ui-block-b"&gt;
                  &lt;a href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a"&gt;
                      &lt;span class="ui-btn-inner"&gt;
                          &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="ui-state-persist ui-btn-active ui-btn ui-btn-icon-right ui-btn-up-a" data-icon="refresh" href="index.html" data-theme="a"&gt;
                      &lt;span class="ui-btn-inner"&gt;
                          &lt;span class="ui-btn-text"&gt;Destinations&lt;/span&gt;
                          &lt;span class="ui-icon ui-icon-refresh ui-icon-shadow"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="ui-block-c"&gt;
                  &lt;a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-up-a"&gt;
                      &lt;span class="ui-btn-inner"&gt;
                          &lt;span class="ui-btn-text"&gt;Activit?s&lt;/span&gt;
                          &lt;span class="ui-icon ui-icon-refresh ui-icon-shadow"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="ui-block-d"&gt;
                  &lt;a data-icon="refresh" href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"&gt;
                      &lt;span class="ui-btn-inner"&gt;
                          &lt;span class="ui-btn-text"&gt;Planning&lt;/span&gt;
                          &lt;span class="ui-icon ui-icon-refresh ui-icon-shadow"&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /navbar --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see the two following button shouldn't be here any idea ?</p>
  
  <pre><code>&lt;a href="index.html" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a"&gt;
  &lt;span class="ui-btn-inner ui-btn-corner-all"&gt;
  &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/a&gt;
  
  &lt;a href="index.html" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-right"&gt;
  &lt;span class="ui-btn-inner"&gt;
      &lt;span class="ui-btn-text"&gt;&lt;/span&gt;
  &lt;/span&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Thanks</p>