ListView does not appear correctly in grid system on jQuery Mobile

I am trying to place a ListView in a gridsystem, but it does not appear correctly. Its a application for tablets, so dont bother with the huge text.

jsfiddle: http://jsfiddle.net/ZX4YC/

<div data-role="page" data-theme="b">

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

    <div data-role="content">
        <div class="ui-grid-a">
            <div class="ui-block-a" style="font-size:70pt">
                <div class="ui-grid-a">
                    <div class="ui-block-a">
                        A:
                    </div>
                    <div class="ui-block-b" id="oeeTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        B:
                    </div>
                    <div class="ui-block-b" id="aTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        C:
                    </div>
                    <div class="ui-block-b" id="pTextField">
                        0
                    </div>
                    <div class="ui-block-a">
                        D:
                    </div>
                    <div class="ui-block-b" id="qTextField">
                        0
                    </div>
                </div>
            </div>
            <div class="ui-block-b">

                <ul data-role="listview">
                  <li><a href="acura.html">Acura</a></li>
                  <li><a href="audi.html">Audi</a></li>
                  <li><a href="bmw.html">BMW</a></li>
                </ul>

            </div>
        </div>
    </div>

Working example: http://jsfiddle.net/Gajotres/L4WnM/

CSS :

.ui-content {
    padding: 0 !important;
}

.ui-listview {
    margin: 0 !important;
}

Only class .ui-listview is important, .ui-content will only remove content padding.