title: jQuery Mobile list divider using the wrong swatch?
body: <p>I've used the <a href="http://jquerymobile.com/themeroller/" rel="nofollow noreferrer">jQuery Mobile ThemeRoller</a> to create a theme for a new mobile website I'm working on. In general the theme works well, but the list-divider that's displayed in the ThemeRoller isn't used in my application.</p>
  
  <p>Here's a screenshot illustrating the problem:</p>
  
  <p><a href="http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png" rel="nofollow noreferrer">ThemeRoller problem http://img.skitch.com/20120416-8fbfbu41abrci1ym8uthatfi4e.png</a></p>
  
  <p>The relevant HTML for the page in question is:</p>
  
  <pre><code>&lt;div id="schedule" data-role="page" data-theme="a"&gt;
      &lt;div data-role="content" data-theme="a"&gt;
          &lt;ul data-role="listview"&gt;
              &lt;li data-role="list-divider"&gt;8:00 am&lt;/li&gt;
              &lt;li&gt;&lt;a href="#session"&gt;Welcome &amp;amp; Keynote&lt;/a&gt;&lt;/li&gt;
              &lt;li data-role="list-divider"&gt;9:00 am&lt;/li&gt;
              &lt;li&gt;&lt;a href="#session"&gt;Session title displayed here&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've even tried adding a few things I found in the ThemeRoller markup:</p>
  
  <pre><code>&lt;li data-role="list-divider" data-swatch="a" class="ui-bar-a" data-form="ui-bar-a"&gt;8:00 am&lt;/li&gt;
  </code></pre>
  
  <p>This has no effect. No matter what I do, it seems to set the class to <code>ui-bar-b</code>. I can live-edit the HTML in Chrome and change <code>ui-bar-b</code> to <code>ui-bar-a</code> and it looks exactly how I would expect.</p>
  
  <p>Am I doing something wrong? Is this maybe a jqm bug?</p>
  
  <p>Using jqm 1.1.0 and jquery 1.7.0.</p>