Why is this listview positioned above the previous <p>?

Question

I'm creating a page with jQuery Mobile and I have the following HTML:

<div data-role="page" id="page1">

    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <p>You need to select a page:</p>

        <ol data-role="listview">
            <li><a href="#page2">Item 1</a></li>
            <li><a href="#page2">Item 2</a></li>
        </ol>
    </div>
</div>

<div data-role="page" id="page2">

    <div data-role="header">
        <h1>Page 2</h1>
    </div>

</div>

It behaves as expected, except that on Chrome 10.0.648.205, I see the following:

Notice that the <p> is obscured by the list. Why is the list overlapping the text?

Note: you can play with the code here: http://jsfiddle.net/r2whr/

Answer 1

For some reason, the listview's margin is defaulting to -15px all around. Just set the listview ol's margin to 0:

<ol data-role="listview" style="margin:0;">
    <li><a href="#page2">Item 1</a></li>
    <li><a href="#page2">Item 2</a></li>
</ol>

(Or just set the top margin to 0 if you still want the -15px margin around the rest of the list.)

Answer 2

Alternatively you could use the list divider instead of the p tag (Just theme it) like this:

http://jsfiddle.net/r2whr/4/

<div data-role="content">
   <!-- <p>You need to select a page:</p> -->

    <ol data-role="listview">
        <li data-role="list-divider">You need to select a page:</li> 
        <li><a href="#page2">Item 1</a></li>
        <li><a href="#page2">Item 2</a></li>
    </ol>
</div>