I have a problem with a navbar inside a footer.

It's just the example code:

2. <div data-role="footer" data-position="fixed">
3.     <div data-role="navbar">
4.             <ul>
5.                 <li><font size="8px"><a href="#" data-icon="grid">Summary</a></font></li>
6.             </ul>
7.         </div><!-- /navbar -->
8. </div><!-- /footer -->

If instead of the navbar I write just some text with or without the <h> tag the height of the footer bar is "normal"

With the code above the footer bar has a big margin above and under the buttons of the navbar and it's really horrible.

I'm trying anything to fix it but it doesn't work and I have no idea if it's because of margins, padding, height, font or something else... I tried a few solutions searching in this forum but nothing seems to solve the problem.

Any ideas?

I attach 2 screenshots just to show you.

I used footer and navbars many times, I don't understand what I'm doing wrong.

The only different thing is that this time I downloaded the .js and .css files because I have to use them inside of an app made with phonegap and changed a few colors making a theme with the themeroller, but I didn't edit any file, just downloaded. All other times I linked the files hosted here.

Hope you can help me!

Thank you