title: jQuery UI icon display problems / questions
body: <p>I'm probably just missing one or two things. </p>
  
  <p>I'm seeing something odd when I try to use a jQuery UI icon.  It looks like when it displays, it's pointing to a place on the sprite which is halfway between two icons, and, they're the wrong icons.  I'm just trying to do this:</p>
  
  <pre><code>&lt;span id="test" class="ui-icon ui-icon-plusthick"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>and the button code:</p>
  
  <pre><code>$("#test").button();  
  </code></pre>
  
  <p>Now, the above works fine, if, say, I put the span tag above the rest of my html; for example, above the top-level div on the page.  But if, for example, I try to put it inside a "td" element of a table, then it does the weird "half icon" effect that I describe above, where it's not displaying the correct icon from the sprite.</p>
  
  <p>Somewhat related to this observation (that the display and behavior of an icon-decorated element seems dependent on the CSS of its containing elements); on the nice sample page that comes with the ui-lightness theme, those lovely buttons seem to be  dependent on the fact that they're wrapped inside a "ul" element with an ID of "icons", then the span is wrapped inside "li" elements, which also affect the display of the button; as in this example:</p>
  
  <p><a href="http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html" rel="nofollow">http://jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/icons.html</a></p>
  
  <p>I'd like my buttons to look like those; to get the nice hover effect; and have the same dimensions, etc.  But it seems like some work is required to get one's buttons to look like that.  So it makes me wonder, why is the example set up such that it's so dependent on the wrappers?  (Obviously there are a lot of icons, so they had to display them somehow, but... it would be nice to see an example where it's just a standalone button, that looks like those, but doesn't require all those wrappers to make it look nice.  I'll figure it out myself eventually but hoping to just get some better understanding here).</p>
  
  <p>Another thing I don't understand is, I'm using the "ui-lightness" theme, and I have the sample page that comes when you download a theme, and the icons look fine there; but on the page I'm working on, it's pointing to a sprite image where the icons are black, as opposed to the nice orange icons of the "ui-lightness" theme.  When I inspect the elements in Chrome's debugger, I can see that it's pointing to a different sprite JPG versus the one from the sample theme.  My understanding is, it's the use of the semantic "ui-icon" that tells it what to do, and it should just grab the icon from the correct sprite because it knows it's using the ui-lightness theme.  (Other elements are correctly displaying orange ui-lightness theme elements, e.g. text buttons look like they are part of the theme).  But somehow it's prioritizing the unwanted black icon sprite over the desired orange one.</p>