Search jQuery

jQuery Forum

Navigation in firefox doesn't work if using a custom theme from ThemeRoller Awaiting moderation!

in Developing jQuery Mobile • 10 years ago

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" />

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></head>
<body>
<div id="pageOne" data-role="page">
            <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">
            <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.