title: Styling jquery mobile listviews
body: <p>im trying to style a listview control but im having problems... when i set width of image to 40px as shown in markup. i cant seem to get the content to align properly to the left. ie. i dnt want that gap between image and text. here is my markup</p>
  
  <pre><code>    &lt;ul data-role="listview" class="ui-listview" data-inset="true" role="listbox"&gt;
          &lt;li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c" style='font-size:8pt;font-weight:normal'&gt;
            &lt;?php echo fmtDate($x-&gt;date); ?&gt;,&lt;?php echo $name; ?&gt; wrote on &lt;?php echo $wname; ?&gt;'s wall
            &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px'&gt;34&lt;/span&gt;
            &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px'&gt;442&lt;/span&gt;
          &lt;/li&gt;
  
          &lt;li role="option" tabindex="0" data-theme="c" &gt;
          &lt;a href='#'&gt;
          &lt;img width="40" height="40" src='&lt;?php echo $imgstr; ?&gt;'/&gt;
          &lt;div style='font-size:9pt;font-weight:normal;'&gt;&lt;?php echo nl2br(addSmilies(urlize(trim($x-&gt;msg))));?&gt;&lt;/div&gt;                
          &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt; 
  </code></pre>
  
  <p>just to clarify this is the markup i get from 'inspect element'</p>
  
  <pre><code>&lt;ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" role="listbox"&gt;
                  &lt;li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c ui-corner-top ui-btn-up-undefined" style="font-size:8pt;font-weight:normal"&gt;
                    Today, 55 minute(s) ago,Maggie Ferguson wrote on Maggie's wall
                    &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px"&gt;34&lt;/span&gt;
                    &lt;span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px"&gt;442&lt;/span&gt;
                  &lt;/li&gt;
  
                  &lt;li role="option" tabindex="-1" data-theme="c" class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c"&gt;&lt;div class="ui-btn-inner"&gt;&lt;div class="ui-btn-text"&gt;
                  &lt;a href="#" class="ui-link-inherit"&gt;
                  &lt;img width="40" height="40" src="../members/mariamjohnson/media/878_thumb.jpg" class="ui-li-thumb ui-corner-bl"&gt;
                  &lt;div style="font-size:9pt;font-weight:normal;"&gt;WAIT A MINUTE,GWE DAN CAN YOU PLEASE BEHAVE YOURSELF,IF YOU HAVE NOTHING TO DO ,GO GET YOURSELF WASTED ELSEWHERE,YOU ARE ABUSIVE AND YOU ARE BEGINING TO IRRETATE ME LIKE A RASH.GURU CHAIN HIM UP,HE SHOULD NOT SPEAK UNTIL SPOKEN TO ,OK?&lt;/div&gt;                
                  &lt;/a&gt;
                  &lt;/div&gt;&lt;span class="ui-icon ui-icon-arrow-r"&gt;&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>looks like jquery mobile adds extra  and classes to the mrkup... any solutions?
  <img src="https://i.stack.imgur.com/y5lR0.png" alt="enter image description here"></p>