the button on the left is the default jqm button: <a data-role = 'button' ... >. the button on the right has been modified : <a data-role = 'button' style = 'background-clip: border-box;' ... >.
In firebug I found that these classes, .ui-corner-all, .ui-btn-corner-all, are affecting the <a>'s, and that the classes include a style background-clip:padding-box;.
QUESTION A - is my solution the right solution?
QUESTION B - what is the best way to implement the style over-ride? ... I do not want to have to add the inline style over-ride to every button ... I do not have access to the jqm css (and I do not know if it is ok to change it anyway - maybe the property is needed for something else) ...
But I want the panel to be available on every 'page'. So I set up a system of moving the panel from 'page' to 'page' as I navigate through the jqm site:
how to Recreate Problem: 1 - load page first time, 1a - click small black button at top right to activate panel 1b - click somewhere on page to de-activate 2 - navigate to another page 2a - use the collapsible menu to navigate at bottom (but be aware: the first collapsible is empty) 2b - activate the panel again 2c - click somewhere on page to de-activate 3 - navigate back to HOME 3a - use the 'home' at top left 3b - activate panel 3c - click somewhere to de-activate it ... FAILs