The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to Match styling of JQuery Mobile Header Button in Body?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #149409

    Hi, I’m working with this JQM page.

    The “home” button at the bottom of the page should match the look of the home button in the header at the top. Here’s what I have so far . . .

    bottomhome {
           font-size: 12.5px;
           padding-left: 30px;
           padding-right: 11px;
    <a id="bottomhome" href="/m/dermbar/index.htm" data-role="button" data-icon="home" data-ajax="false">Home</a>

    As you can see, the font size and padding are having no effect. Have the feeling that some type of compound selector might be required.

    Also, is there any way to solve this by using existing classes? Doesn’t seem right to hard-code the font size for example.

    Can anyone help?


    The padding certainly is having an effect as you can see if you turn them off.

    Since the two buttons and hrefs are exactly the same why not try a cut and paste of the HTML (including classes) for the top button?

    I should copy over all the classes that apply rather than you making up your own selector. One ting to note that it looks like the font for the top button is expressed as a percentage and not a set px value.

    Just remember to keep a backup of your work in case of issues.


    @Paulie_D. Thanks, that sounds good, but as far as I can see, doing so doesn’t work.

    Here’s the top button code copied from Chrome Developer Tools — this creates a button, but it does not take on the look of the button in the header – that’s the problem. Please see the revised page here.

    <a href="/m/dermbar/index.htm" class="ui-btn-right ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-a" data-icon="home" data-ajax="false" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a"><span class="ui-btn-inner"><span class="ui-btn-text">Home</span><span class="ui-icon ui-icon-home ui-icon-shadow">&nbsp;</span></span></a>

    Hmmm…it’s closer to be sure but it does look as though buttons in the ui.header div are affected.

    Probably a cascade issue.

    I’d have to look at the API documentation.

    I know this is avoiding the issue but since this is for mobile…do you really need a button to go back to the top of the page….most people just scroll up don’t they?


    It’s a good point, the bottom button is probably optional. In fact, we didn’t have one for the last two years. But some of the pages are getting a bit long and I thought it might be nice for users, rather than scrolling all the way back up.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.