As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like:
The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following code:
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>
You can view the code snippet here.
In my Android code, there is additional HTML surrounding this module, but both my phone and JSFiddle render it incorrectly. What could be causing this discrepancy?
Furthermore, I noticed during testing that multiple "nbsp" characters are appearing between each li element. I'm not sure why this is happening or how to prevent it. Any suggestions?