title: jQuery UI Theme Conflict: SlickGrid and jQuery UI Tabs
body: <p>I'm trying to apply this SlickGrid example:</p>
  
  <p><a href="http://mleibman.github.com/SlickGrid/examples/example4-model.html" rel="nofollow noreferrer">http://mleibman.github.com/SlickGrid/examples/example4-model.html</a></p>
  
  <p>to my own web project.</p>
  
  <p>When I drop my grid in to the top of my page, it renders correctly.  However, when I drop it into a jQuery UI Tabs tab on the same page, the CSS Sprite that renders the search image is incorrectly offset.</p>
  
  <p><img src="https://i.stack.imgur.com/47HGw.png" alt="The Problem"></p>
  
  <p>The icon is rendered with</p>
  
  <pre><code>&lt;span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/&gt;
  </code></pre>
  
  <p>It looks like jQuery UI Tabs also uses the same CSS classes, and of course a conflict arises.</p>
  
  <p>Looking at the effective styles in IE9, the control outside of jQuery UI Tabs that renders correctly has the following:</p>
  
  <p><img src="https://i.stack.imgur.com/IwRct.png" alt="Correct styles"></p>
  
  <p>The control that renders incorrectly looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/qYLdL.png" alt="Wrong styles"></p>
  
  <p><strong>Bottom Line</strong></p>
  
  <p>Placing the SlickGrid in a jQueryUI Tab causes the <code>ui-icon-search</code> class to be lost and therefore the wrong <code>background-position-x/y</code> to be set.</p>
  
  <p>Why is that class being lost and how can I fix the issue?</p>