Last button in navbar is 2px shorter than the others
For some reason, the navbar I have created is 2px shorter than it should be. After digging around in Firebug, I was finally able to determine that this is due to the last button being 2px shorter than the others. Here is my code:
- <div data-role="navbar" data-iconpos='top'>
- <ul>
- <li><a href="index.php" data-icon="grid"data-ajax='false'>Inventory</a></li>
- <li><a href="index.php?action=add" data-icon="plus"data-ajax='false'>Add</a></li>
- <li><a href="index.php?action=remove" data-icon="minus"data-ajax='false'>Remove</a></li>
- </ul>
- </div>
I do not have a custom stylesheet for this page or anything. At the current zoom of my browser, the 'inventory' and 'add' buttons are 211px wide, but 'remove' is only 209px. The <li> tags all show up at 211px, but the <a> tags within are 211, 211, 209.
In looking at the code auto-generated by jquerymobile, I didn't notice any special classes or anything assigned to that last button. All 3 buttons look the same in the HTML shown by Firebug.
Any ideas on how to fix this?