Jquery Mobile 1.4 Header Spacing

When I place a search text input element inside a div in my header it gets a lot of space added to the top. I've tried setting margin/padding 0 on all the elements but the extra sp

Solution 1:

It's caused by some extra non-breaking space characters in your source which get translated to  .

I'm guessing you've been caught by copying/pasting code from their website, see Jquery Mobile automatically adds &nbsp

Updated fiddle without the whitespace http://jsfiddle.net/155pr11x/1/

Solution 2:

Try to view the HTML elements of interest using "More Tools / Developer tools" with a Chrome browser or the "Firebug" add-on with a Firefox browser. Either tool should show you why you are getting the spacing that you are seeing.

Solution 3:

Input element was not closed here's the solution

<input data-theme="a"data-type="text"data-mini="true"data-clear-btn="true"/>