jQuery Forum

I'm trying to create a jQuery Mobile page that has both a header bar with an icon-supported link and a footer-tab bar that has third-party icons.  However, the css for the tab bar is overriding the header bar.  Here is the css I'm using for the tab bar:

1. <style>   
2.         .ui-btn .ui-btn-inner { padding-top: 40px !important; font-size:8px; }
3.         .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
4.         #features .ui-icon { background:  url("featureicon.png") 50% 50% no-repeat; background-size: 40px 40px; }
5.         #demo .ui-icon { background:  url("demoicon.png") 50% 50% no-repeat; background-size: 40px 40px;  }
6.     </style>

This is the css suggested by the jQuery Mobile docs.  However, it causes the header bar to display incorrectly.  Here is my header code:

1. <div data-role="page" data-theme="a">
2.     <div class="myheader" data-role="header"><a href="index.html" data-icon="home" >Home</a><h1>Demo</h1></div>

Basically, it causes the header icon button ("Home") to have really large height and to be offset to the left and top by too much.  Is there any way to set the css for the tab bar to be different from the header bar so that it displays properly?

Thanks