How to create a jquery mobile ordered list with list symbols set to outside? -

<ol data-role="listview">     <li>         <h3>heading</h3>         <p>description</p>     </li> </ol> 

the result is:

   1.    heading     description 

i want:

    1.    heading           description 

i have thought have stuck list-style-position:outside inline style li tag. no luck. if remove listview data-role, style applied correctly.

some how listview date-role manipulating styles, can't figure out how though... i've searched list-style-position line in jquery mobile css , js files , no results returned, going on here?

some please?

ps. using jquery mobile 1.0a4.1

looks need add custom css

live example: http://jsfiddle.net/7bn2z/43/ live example #2: http://jsfiddle.net/7bn2z/48/ (fixed layout little)

html:

<div data-role="page" data-theme="b" id="jqm-home">     <div data-role="content">          <ol data-role="listview">             <li>                 <span>                     <span class="oi-li-heading">heading</span>                     <span class="oi-li-desc">description</span>                 </span>             </li>         </ol>     </div> </div> 

css:

.oi-li-heading {     font-size: 16px;     font-weight: bold;     margin: .6em 0; }  .oi-li-desc {     font-size: 12px;     font-weight: normal;     margin: -.5em 0 .6em; } 

update:

if have chrome installed can right click example page here: http://jsfiddle.net/7bn2z/49/ , inspect element. can see jqm adds of css

so in example start off with:

<ol data-role="listview">     <li>         <h3>heading</h3>         <p>description</p>     </li> </ol> 

and jqm adds it's tags this:

<ol data-role="listview" class="ui-listview">     <li class="ui-li ui-li-static ui-body-c">         <h3 class="ui-li-heading">heading</h3>         <p class="ui-li-desc">description</p>     </li> </ol>