Question

I’m using jquery UI 1.8 – I apply the button functionality to my html button element by using the element.button() method.

Now everything works fine until I dynamically add another element above the button elements. The buttons stay in place as if they were position: absolute. But this happens only in IE8 / IE9. When you “mouseover” them they correct their position. Is there a way around this?

Many thanks

Code added:

This is the table I’m using. I tried with two floating divs earlier but tried to use the table instead to make sure my css wasn’t causing the problem:

 <table style="width:400px">
 <tr><td class="subheader">Aufgaben</td>
 <td style="text-align: right">
 <button class="versions">Historie</button></td>
 </tr></table>

now I call the button method

$( ".versions" ).button({
     icons: {
         primary: "ui-icon-calendar"
     }
});

and this is how I add an element above the button, actually I just set an element from display: none to display: block

 $(".ui-state-highlight").css("display", "block");

now the result is as I described earlier, the button element just sits in the same position as every other element moves his position further down the page.

Answer 1

It will be something to do with the css styles which get called in by jQuery ui, if you haven’t already got these in place, make sure you have as they will all be tested!

This is how i would do it:

<div id="container" style="float: left; width: 100%">
<div id="left" style="float: left; width: 40%">
    <p style="width: 100%; height: 30px display: block"><a href="#" style="displaY: block">Button 1</a></p><!-- change to suit -->
</div>
<div id="right" style="float: left; width: 40%;">
    <p style="width: 100%; height: 30px; display: block"><a href="#" style="displaY: block">Button 2</a></p>
</div>

And then invoke your ui buttons – it’s just an issue with how you’ve coded and styled it!