SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    California
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    Hi, I'm working with this JQM page.

    The "home" button at the bottom of the page should match the appearance 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;
    float:right;
    }

    <a id="bottomhome" href="/m/dermbar/index.htm" data-role="button" data-icon="home" data-ajax="false">Home</a>

    But 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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,523
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It should be an id not a class but I guess that's just a typo when you copied it in here.

    It looks as though you need to target the span as that is being styled in the head section via a ui-header class.

    Try this:

    Code:
    #bottomhome {padding:0;float:right;}
    #bottomhome .ui-btn-inner{
    font-size: 12.5px;
    padding-left: 30px;
    padding-right: 11px;
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •