Navigation in my app doesn't work in firefox(Works in Chrome), if i change my stylesheet from the default to the one downloaded from Theme Roller.
Code segment which works fine:
- <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
If i
JUST rewrite the above code segment as:
- <link href="Css/TestTheme.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile.structure-1.0.min.css" />
<!-- <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> -->
Where TestTheme.css is my custom theme downloaded from ThemeRoller and placed in the correct location, the Navigation doesn't work.
Navigation doesn't work means:Here's my page structure:
- <html>
- <head><!--All reqd stuff--></head>
- <body>
- <div id="pageOne" data-role="page">
- <!--Header-->
- <!--Content-->
- <footer data-role="footer" data-position="fixed" data-id="idFooter">
<nav data-role="navbar" id="navFtr">
<ul id="ulFtr">
<li id="ftrOne"><a href="#pageOne" class="ui-btn-active ui-state-persist">ONE</a></li>
<li id="ftrTwo"><a href="#pageTwo">TWO</a></li>
</ul>
</nav>
</footer>
- </div>
- <div id="pageTwo" data-role="page">
- <!--Header-->
- <!--Content-->
- <footer data-role="footer" data-position="fixed" data-id="idFooter">
<nav data-role="navbar" id="navFtr">
<ul id="ulFtr">
<li id="ftrOne"><a href="#pageOne">ONE</a></li>
<li id="ftrTwo" class="ui-btn-active ui-state-persist"><a href="#pageTwo">TWO</a></li>
</ul>
</nav>
</footer>
- </div>
- </body>
- </html>
And i click on 'TWO' in the footer(while i am in page ONE), the
URL changes to
http://myappur/#pageTwo but doesn't
navigates to pageTwo(remains in pageOne) unless i reload/refresh the page.
Also the footer(although fixed) doesn't stick to the bottom in both the browsers with the custom CSS.