Issue when switching pages

Issue when switching pages

I am building my first site using jquery mobile, and am having some issues when switching pages. When I go from my first page to my second (which is longer than the screen) it loads to where the footer is on the bottom of the screen and I am able to scroll down past the footer, but not up to the top to see my header and back buttons, etc.

I've tested it in chrome, dolphin browser for android, and on my ipod touch.

Now, I'm only in the wire framing portion of the site, so the code may be a little but messy, but here is the page that is loading weird:

  2. <div data-role="page">

  4. <div data-role="header" data-backbtn="false">
  5. <img src="images/logo.gif" class="logo" />
  6. </div>
  8. <div data-role="list-divider">
  9. <a data-rel="back">Back</a>
  10. Directory
  11. </div>
  13. <div data-role="content">
  14. <ul data-role="listview" data-filter="true">
  15. <li>
  16. <table>
  17. <tr>
  18. <td><div style="display: block; width: 42px; height: 42px; background: #333;"></div></td><td><h1>Venue/Location Name</h1></td>
  19. </tr>
  20. <tr>
  21. <td><h2>$$$</h2></td>
  22. <td>Short description of location. Two or three lines max. Nunc ornate tortor vitae augue pulvinar ut.</td>
  23. </tr>
  24. </table>
  25. </li>

  27. <li>
  28. <table>
  29. <tr>
  30. <td><div style="display: block; width: 42px; height: 42px; background: #333;"></div></td><td><h1>Venue/Location Name</h1></td>
  31. </tr>
  32. <tr>
  33. <td><h2>$$$</h2></td>
  34. <td>Short description of location. Two or three lines max. Nunc ornate tortor vitae augue pulvinar ut.</td>
  35. </tr>
  36. </table>
  37. </li>

  39. <li>
  40. <table>
  41. <tr>
  42. <td><div style="display: block; width: 42px; height: 42px; background: #333;"></div></td><td><h1>Venue/Location Name</h1></td>
  43. </tr>
  44. <tr>
  45. <td><h2>$$$</h2></td>
  46. <td>Short description of location. Two or three lines max. Nunc ornate tortor vitae augue pulvinar ut.</td>
  47. </tr>
  48. </table>
  49. </li>

  51. <li>
  52. <table>
  53. <tr>
  54. <td><div style="display: block; width: 42px; height: 42px; background: #333;"></div></td><td><h1>Venue/Location Name</h1></td>
  55. </tr>
  56. <tr>
  57. <td><h2>$$$</h2></td>
  58. <td>Short description of location. Two or three lines max. Nunc ornate tortor vitae augue pulvinar ut.</td>
  59. </tr>
  60. </table>
  61. </li>

  63. <li>
  64. <table>
  65. <tr>
  66. <td><div style="display: block; width: 42px; height: 42px; background: #333;"></div></td><td><h1>Venue/Location Name</h1></td>
  67. </tr>
  68. <tr>
  69. <td><h2>$$$</h2></td>
  70. <td>Short description of location. Two or three lines max. Nunc ornate tortor vitae augue pulvinar ut.</td>
  71. </tr>
  72. </table>
  73. </li>
  75. </ul>
  76. </div>

  78. <div data-role="footer">
  79. <h4>Page footer.</h4>
  80. </div>

  82. </div>
Like I said, that's not exactly how I planned the info to be listed, but I was doing it for wire framing. If anyone has any idea why it's loading in almost a reverse it would be greatly appreciated.

One last note, it seems that after the page loads, I can refresh the page and get it to load correctly, but that is a pain.