Bar at bottom and top of screen?

Bar at bottom and top of screen?

    Hello,

    I'm currently working on a little Webapp as a school assignment. I copied the code  here and edited it a little, however there's a small bar at the top and bottom of the window. Also, if I chance the background color it will only show in those two bars. Does anyone perhaps know what the issue might be?

    Thanks in advance
    1. <DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <title>Naam</title>
    8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    9. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    10. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    11. <script>
    12. $( document ).on( "pageinit", "#home", function() {
    13. $( document ).on( "swipeleft swiperight", "#home", function( e ) {
    14. // We check if there is no open panel on the page because otherwise
    15. // a swipe to close the left panel would also open the right panel (and v.v.).
    16. // We do this by checking the data that the framework stores on the page element (panel: open).
    17. if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
    18. if ( e.type === "swipeleft"  ) {
    19. $( "#right-panel" ).panel( "open" );
    20. } else if ( e.type === "swiperight" ) {
    21. $( "#left-panel" ).panel( "open" );
    22. }
    23. }
    24. });
    25. });
    26. </script>
    27. <style>
    28. /* Swipe works with mouse as well but often causes text selection. */
    29. #home * {
    30. -webkit-user-select: none;
    31. -moz-user-select: none;
    32. -ms-user-select: none;
    33. -o-user-select: none;
    34. user-select: none;
    35. }
    36. #home * {
    37. -webkit-user-select: none;
    38. -moz-user-select: none;
    39. -ms-user-select: none;
    40. -o-user-select: none;
    41. user-select: none;
    42. }
    43. /* Arrow only buttons in the header. */
    44. #home .ui-header .ui-btn {
    45. background: none;
    46. border: none;
    47. top: 9px;
    48. }
    49. #home .ui-header .ui-btn-inner {
    50. border: none;
    51. }
    52. /* Content styling. */
    53. dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
    54. dt { font-size: 2em; font-weight: bold; }
    55. dt span { font-size: .5em; color: #777; margin-left: .5em; }
    56. dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
    57. .back-btn { float: right; margin: 0 2em 1em 0; }
    58. </style>
    59. </head>
    60. <body>
    61. <div data-role="page" id="home" data-theme="a" data-url="home">
    62.    <div data-role="header" data-theme="a">
    63.        <h2>Naam</h2>
    64.        <a href="#left-panel" data-theme="a" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open left panel</a>
    65. <a href="#right-panel" data-theme="a" data-icon="arrow-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-icon-nodisc">Open right panel</a>
    66.    </div>
    67.    <div data-role="content">
    68.        <dl>
    69.            <dt>Welkom</dt>
    70.            <dd>Home</dd>
    71.        </dl>
    72.    </div>
    73.    <div data-role="panel" id="left-panel" data-theme="a">
    74.        <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Sluiten</a>
    75. <br>
    76. <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="home" data-iconpos="right">Home</a>
    77. <br>
    78. <a href="menu.html" rel="external" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="grid" data-iconpos="right">Menukaart</a>
    79.    </div>
    80. <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
    81.        <a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Sluiten</a>
    82.    </div>
    83. </div>
    84. </body>
    85. </html>