jQuery UI Button inside table cell - rendering issue

Question

I'm using jQuery button, in particular this example:

http://jqueryui.com/button/#splitbutton

I've placed this markup incide table td for each row:

<div>
    <button id="possible-actions">Action</button>
</div>
<ul>
    <li><a href="#">Reopen</a></li>
    <li><a href="#">Close</a></li>
    <li><a href="#">Delete</a></li>
    <li><a href="#">Move...</a></li>
</ul>

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.

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 td, or I'm dynamically creating these buttons after page is loaded and browser is having issues with rendering table.

FYI: Google Chrome & FF doesn't have this issue.

Answer 1

Changing the markup into:

<span style="display: inline-block">
    <button id="possible-actions">Action</button>
</span>
<ul style="display: none">
    <li><a href="#">Reopen</a></li>
    <li><a href="#">Close</a></li>
    <li><a href="#">Delete</a></li>
    <li><a href="#">Move...</a></li>
</ul>

Fixed the issue. The styles I use are:

• display: inline-block - because I need to control some width/height dimmentions
• display: none - because I create & show menu on demand when button is clicked