title: jQuery UI Button inside table cell - rendering issue
body: <p>I'm using jQuery button, in particular this example:</p>
  
  <p><a href="http://jqueryui.com/button/#splitbutton" rel="nofollow">http://jqueryui.com/button/#splitbutton</a></p>
  
  <p>I've placed this markup incide table <strong>td</strong> for each row:</p>
  
  <pre><code>&lt;div&gt;
      &lt;button id="possible-actions"&gt;Action&lt;/button&gt;
  &lt;/div&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Reopen&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Close&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Delete&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Move...&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and of course I've modified javascript accordingly. However, now I'm struggling with rendering issue in Internet Explorer 8. What is happening, is that content of other cells is rendered with a bug - for instance rows have wierd height, some cells content is rendered outside cell. But when I move my mouse over rows, it seems that IE redraws/refreshes and row is fixed.</p>
  
  <p>I don't have any mouseover handler nor other events. Plain table + this jQuery UI Button. I wonder if this could be happening because I'm using block elements inside <strong>td</strong>, or I'm dynamically creating these buttons after page is loaded and browser is having issues with rendering table.</p>
  
  <p>FYI: Google Chrome &amp; FF doesn't have this issue.</p>