Navbar button sizes in JQuery Mobile

Question

I am trying to create a navbar in JQuery Mobile for an app that will run in iOS. My code is shown below. When I run the app, the three options appear. However, they are all scrunched to the left side. I want the three options to fill the available space in the footer. What am I doing wrong? I just using the glyphish icons that were referenced in the jquery mobile page. Thank you for your help!

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }                

  #navButton1 .ui-icon { background: url(/navbar/option1.png) 50% 50% no-repeat; background-size: 24px 22px; }
  #navButton2 .ui-icon { background: url(/navbar/option2.png) 50% 50% no-repeat; background-size: 24px 22px; }      
  #navButton3 .ui-icon { background: url(/navbar/option3.png) 50% 50% no-repeat; background-size: 24px 22px; }          
</style>

...

<div id="myPage" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>My App</h1>
  </div>

  <div data-role="content">
    <!-- My Content -->
  </div>

  <div data-role="footer" data-position="fixed" class="navbar">
    <div id="myNavbar" data-role="navbar" class="navbar" data-grid="d">
      <ul>
        <li><a href="#" id="navButton1" data-icon="custom" class="ui-btn-active ui-state-persist">Option 1</a></li>
        <li><a href="option2.html" id="navButton2" data-icon="custom" rel="external" data-transition="none">Option 2</a></li>
        <li><a href="option3.html" id="navButton3" data-icon="custom" rel="external" data-transition="none">Option 3</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Try removing the data-grid="d" from your div element.