title: Themeroller icon not lining up where I'd expect
body: <p>I'm trying to use a themeroller icon on a page and it's not lining up where I'd expect.  If I say:</p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Test Page&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" 
                            href="/css/ui-lightness/jquery-ui-1.8.17.custom.css" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div&gt;&lt;span class="ui-icon ui-icon-plusthick"&gt;&lt;/span&gt;Hello World&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I would expect to see:</p>
  
  <pre><code>+Hello World
  </code></pre>
  
  <p>But instead I only see:</p>
  
  <pre><code>+
  </code></pre>
  
  <p>Why is this?  And how do I get the result I'm expecting?</p>
  
  <p>Thank you.</p>
  
  <p>Edit 1:
  I followed the suggestion below to change the span to two tags (open and close, as shown above), but that didn't make any difference.</p>
  
  <p>The relevant CSS seems to be:</p>
  
  <pre><code>.ui-icon
  {
      display: block;
      text-indent: -99999px;
      overflow-x: hidden;
      overflow-y: hidden;
      background-repeat: no-repeat;
  }
  
  .ui-icon
  {
      width: 16px;
      height: 16px;
      background-image: url("images/ui-icons_222222_256x240.png");
  }
  
  .ui-icon-plusthick 
  {
      background-position: -32px -128px;
  }
  </code></pre>
  
  <p>I tried changing the display: block to inline-block and other things, but it gets worse if I do.</p>
  
  <p>Edit 3:
  Nevermind, I screwed up the code, it should have been:</p>
  
  <pre><code> &lt;span class="ui-icon ui-icon-plusthick" 
               style="display: inline-block"&gt;&lt;/span&gt;Hello World&lt;/div&gt;
  </code></pre>
  
  <p>And that works fine.  (I misspelled "display")</p>