<style> html { background-color: #333; } @media only screen and (min-width: 600px){ .ui-page { width: 600px !important; margin: 0 auto !important; position: relative !important; border-right: 5px #666 outset !important; border-left: 5px #666 outset !important; } } .ui-header {width: 600px !important; margin: 0 auto !important;} </style>

It all looks fine but the menu (data-role="panel") when it slides onto my screen doesn't have clickable buttons. When I 'click' a button (it doesn't actually click, it doesn't respond) nothing happens, the menu just slides back to the right. Also, there is no hover effect which would indicate that it's not a problem with the buttons itself but with the menu as a whole loosing all of its functionality. (BTW If I don't mess around with the width the app works fine!) Here is my menu/panel:

<div data-role="panel" id="navpanel" data-display="overlay" data-position="right"> <div data-role="controlgroup" data-corners="false"> <a href="#" id="listview" data-role="button">Listview</a> <a href="#" id="study" data-role="button">Study</a> <a href="#" id="test" data-role="button">Test</a> <a href="#" id="quit" data-role="button">Quit</a> </div> </div> 

I use  href="#"  because I bind the buttons' ids to anonymous functions in my .js file. Any ideas on what might be wrong here and how to fix it?