Panel Problems

Panel Problems

The panel that I have messes up the rest of the page. 
For instance, the text on the buttons look like this:

 and the panel does not follow the display that I chose.


Here is the code:

  1. <div data-role="page" id="c">
  2.     <div data-role="panel" id="defaultpanel" data-theme="a">

  3.         <div class="panel-content">
  4.             <h3>More</h3>
  5.             <ul data-role="listview" data-theme="b">
  6.                 <li><a href="#1">1</a></li>
  7.                 <li><a href="#2">2</a></li>
  8.                 <li><a href="#3">3</a> </li>
  9.             </ul>
  10.         </div>

  11.     </div>
  12.     <div data-role="header">
  13.         <a href="#defaultpanel" data-icon="bars" data-theme="b">More</a>
  14.         <h1>Hello</h1>
  15.     </div>
  16.     <div data-role="footer">
  17.         <div data-role="navbar" data-iconpos="top" data-position="fixed" data-tap-toggle="false">
  18.             <ul>
  19.                 <li><a href="#" data-icon="home" data-theme="b">4</a></li>
  20.                 <li><a href="#5" data-icon="alert" data-theme="b">5</a></li>
  21.                 <li><a href="#6" data-icon="gear" data-theme="b">6</a></li>
  22.             </ul>
  23.         </div>
  24.     </div>
  25. </div>
How do I fix this?? Thank you.

[moderator moved to JQM]