Switching pages: new page does not get styles.

Switching pages: new page does not get styles.

Demo: http://dev1.prosportsmedia.com/mobile/

Simple Explanation: When switching pages the new page displays but is not formatted or styled.

Detailed Problem:
All pages are relatively linked. When clicking on any relatively linked page the new page is loaded and displayed but it does not contain any of the formatting love jquery mobile normally applies. When visiting any of these pages by themselves they all render properly but the same issue exists where you cant navigate between them.
Sometimes the links do actually work(for instance the news section of the home page). But the menu link has never worked.

This issue only exists when using jquery 1.4.4 If i use jquery 1.4.3 all pages render correctly however i loose some icons and I'd like to stay as current as possible.


Example HTML: (connect.php)
  1. <!DOCTYPE html>
  2. <html>
    <head>
        <meta charset="utf-8" />
        <title>Monarchs Hockey</title>
        <link rel="stylesheet" href="app_styles/jquery.mobile.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>
    <div data-role="page">
        <div data-role="header">
            <h1>Monarchs Hockey</h1>
            <a href="navigation.php"  data-icon="grid" data-transition="slideup" class="ui-btn-right">Menu</a>
        </div>

        <div data-role="content">














  3. <div class="ui-grid-a">
        <div class="ui-block-a"><a href="http://www.facebook.com/MonarchsHockey" data-role="button" target="_blank">Facebook</a></div>
        <div class="ui-block-b"><a href="http://twitter.com/#!/monarchshockey" data-role="button" target="_blank">Twitter</a></div>
    </div>
    <h2>Subscribe to jungle news</h2>
    <form method="POST" action="../app_controls/connect_success.php">
        <input type="hidden" name="mobile" value="1" />
        <div data-role="fieldcontain">
            <label>Email Address</label>
            <input type="text" class="textbox" name="sub-emailaddress">
        </div>
        <input type="submit" class="button" name="submit" value="Subscribe">
    </form>











  4.     </div>
    </div>

Example HTML: (navigation.php)
  1. <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />

        <title>Monarchs Hockey</title>
        <link rel="stylesheet" href="app_styles/jquery.mobile.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    </head>
    <body>
    <div data-role="page">
        <div data-role="header">
            <h1>Navigation</h1>
        </div>
        <div data-role="content" class="">
            <ul data-role="listview" data-theme="a" data-inset="true">
                <li><a href="index.php" data-transition="slide">Home</a></li>
                <li><a href="http://www.ticketmaster.com/venue/8748" rel="external" target="_blank">Tickets</a></li>
                <li><a href="schedule.php" data-transition="slide">Schedule</a></li>
                <li><a href="news.php" data-transition="slide">News</a></li>
                <li><a href="contact.php" data-transition="slide">Contact</a></li>
                <li><a href="connect.php" data-transition="slide">Connect</a></li>
                <li><a href="https://oss.ticketmaster.com/html/home.htmI?team=manchester&l=EN&STAGE=1" rel="external">My Account</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>



























Any help would be much appreciated as I've spent a few hours searching for a solution to this problem.