jquery mobile listview creating space between each item

jquery-mobile, listview, space

Solution

That happens when you copy the code from the JQuery Mobile demo page. I guess you have the same problem with your list. Try to delete the invisible chars before each `<li>` to fix it. See if a few lines of `<li>test</li><li>test</li>` looks OK.

Problem

I can't seem to remove the small space in between each list item. The list is much longer than what I am posting here, but I don't think that has anything to do with the issue. I have attempted to correct it by reformatting the list several times, but to no avail. I have also referenced the jquery mobile website and still cannot locate the answer. My Code: ``` <!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1," /> <!-- Website Title --> <title>Test </title> <!-- Jquery Mobile Theme / Jquery Scripts --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <!-- Color of Background --> <body style="background:#6e6e6e"> <!-- Start of Name page --> <div data-role="page" id="name"> <div data-role="header" data-theme="b"> <h1>Test</h1> </div><!-- /header --> <div data-role="content"> <p> <ul data-role="listview" data-filter="true" data-filter-placeholder="Test..." data-inset="true" data-autodividers="true"> <li><a href="#link2">Hello</a></li> <li><a href="#link3">There</a></li> <li><a href="#link4">World</a></li> <li><a href="#link5">World2</a></li> </p> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-theme="b"> <h4>© 2013 ChurchySearch</h4> </div><!-- /footer --> </div><!-- /Name page --> ``` It keeps coming out looking like this: http://www.jesseandamanda.com/screenshot.png Suggestions?

Original source