Nested List - invisible icons
I have a simple nested list. I would like icons on all list items regardless of whether it has children. I can't seem to achieve this. Some example html is below and I have attached screenshots of the problems.
<ul data-role='listview' data-inset='true' data-theme='a'>
<li><img class='ui-li-icon' src='tag_blue.png' border='0'/>Coffee</li>
<li>
<img class='ui-li-icon' src='tag_blue.png' border='0'/>
Tea
<ul data-role='listview' data-inset='true' data-theme='a'>
<li><img class='ui-li-icon' src='tag_blue.png' border='0'/>Black tea</li>
<li><img class='ui-li-icon' src='tag_blue.png' border='0'/>Green tea</li>
</ul>
</li>
<li><img class='ui-li-icon' src='tag_blue.png' border='0'/>Milk</li>
</ul>
With the above the nested list 'Tea' title doesn't display (see attached nested_title_invisible.png).
If I change '<li><img class='ui-li-icon' src='tag_blue.png' border='0'/>Tea' to put the image after the title e.g. '<li>Tea<img class='ui-li-icon' src='tag_blue.png' border='0'/>' then the title is visible, but still no icon (see attached nested_no_icon.png).
Also, the icons in this example are overlaying the <LI> titles, however this doesn't happen in my application where I point to local version of jquery.mobile-1.0a3.min.js.
Any help would be greatly appreciated.
Thanks.