jQuery UI Button inside table cell - rendering issue

Question

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

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.

IE is always having issues with jQuery...

ATOzTOA
– ATOzTOA

2012-12-18 16:12:05 +00:00
Commented Dec 18, 2012 at 16:12 — ATOzTOA
– ATOzTOA, Commented Dec 18, 2012 at 16:12
Please post a jsFiddle example.

j08691
– j08691

2012-12-18 16:17:39 +00:00
Commented Dec 18, 2012 at 16:17 — j08691
– j08691, Commented Dec 18, 2012 at 16:17
It could be hard to reproduce it on jsFiddle, but I'll try

dragonfly
– dragonfly

2012-12-18 16:29:46 +00:00
Commented Dec 18, 2012 at 16:29 — dragonfly
– dragonfly, Commented Dec 18, 2012 at 16:29

dragonfly · Accepted Answer · 2012-12-23 11:37:52Z

0

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

answered Dec 23, 2012 at 11:37

dragonfly

17.8k32 gold badges117 silver badges230 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Button inside table cell - rendering issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related