JQuery Mobile: Extra space, black line appearing under data-role="content"? - ios

Question

I have a page with two lists on it. When I test on my iPhone 5, underneath the lists there is a load of extra blank space and a random blank line. (See image below)
I am not using the footer data-role="footer". Just data-role="content" and data-role="page". I have tried using the footer but it makes no difference.
When I test on a web browser all appears fine, so I cannot use the element inspector to find out whats wrong.
Would anyone know how to get rid of this? (ps I am running this on Cordova if that matters)
My HTML is:
<div data-role="page" data-title="Conversation">
<div data-role="header">
Back
<h1>Conversation</h1>
</div><!--HEADER-->
<div data-role="content">
<ul data-role="listview">
<li><a id="facebook" href="#"><img class="ui-li-icon" src="img/facebook.png"/>Facebook</a></li>
<li><a id="twitter" href="#"><img class="ui-li-icon" src="img/twitter.png"/>Twitter</a></li>
<li><a id="youtube" href="#"><img class="ui-li-icon" src="img/youtube.png"/>YouTube</a></li>
<li><a id="instagram" href="#"><img class="ui-li-icon" src="img/instagram.png"/>Instagram</a></li>
</ul>
<div class="yeldivider"></div>
<ul data-role="listview">
<li><a id="tickets" href="#"><img class="ui-li-icon" src="img/ticketsicon.png"/>Tickets</a></li>
</ul>
</div><!--CONTENT-->
</div><!--PAGE-->
There is no custom CSS other then the .yeldivider which appears between to two lists.
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}

Answer 1

This is a wild guess but sometimes content DIV has a problem with vertical stretching.
Worst case scenario, give it some id or class, like this:
<div data-role="content" class="cover-screen">
//Content goes here
</div>
And use this CSS if you don't have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
or this CSS if you have a footer:
.cover-screen {
position: absolute;
top: 43px !important;
bottom: 43px !important;
left: 0 !important;
right: 0 !important;
}
And like I told you this is just a wild guess.

Answer 2

Working fine here DEMO http://jsfiddle.net/yeyene/SjbMd/ and already tested on iPhone.
I use these...
jquery.mobile-1.3.1.min.css
jquery-1.9.1.min.js Remove
jquery.mobile-1.3.1.min.js
what about yours?
CSS
.yeldivider {
background-color:#ffeb00;
height: 40px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin-left: -40px;
}