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

HTML & CSS
1

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

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:



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