Question

I placed a button in the header of a page and it renders half the height. As well, there is a width gap to the right.

I have used fairly simple jQueryMobel syntax.

URL: http://sandapps.com/Data/Mobile_Energy_Oil_Gas_Pertroleum_Coal_Solar_Wind.aspx

On an iPhone 4S:

Answer 1

You should be able to create buttons without text using the jQuery Mobile framework and without hacking the framework’s CSS. I do often and I haven’t had them display like yours. For icons without text I believe you are supposed to declare: data-iconpos="notext" as an attribute for the anchor tag:

<div data-role="header">
    <h1>...</h1>
    <a href="#" data-iconpos="notext" data-icon="home">Some Text That Won't Display</a>
</div>

Source: http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Here is a demo using the same <a> code as above: http://jsfiddle.net/3njz7/

Also note that you can have text in your anchor tag if you set the data-iconpos attribute to notext.