Button is positioned incorrectly in IE7

[getimoliver]

This is happening in IE7 but not in Firefox. When placing a button element inside a table, the initial position of the button is off. The correct position is restored when a user hovers over the button.

I can provide a snippet of the code sometime tomorrow, but until then thee is a demo of this bug at the start of ​this video.

[spudly]

This gets worse if the table is inside a div with overflow:scroll. When you scroll the buttons don't scroll with it. They get fixed after you hover over them.

[AmitPatel]

I have solved this issue in IE7. we have remove from "zoom" attibute from ".ui-button" CSS.

I have created another CSS for IE7.

.ui-button-ie7-overflow{overflow: visible; cursor: pointer; text-align: center; line-height: 1.4;padding: .1em .4em;} 

Happy Coding. :)

Thanks Amit Patel

[Scott González]

Please provide a reduced test case showing the problem. Merely placing a button inside a table isn't producing this problem.

[Lodewijk]

We're having the same problem. Here is a minimal testcase in jsFiddle: ​http://jsfiddle.net/qqW6b/4/

[philw]

Same problem here, although removing "zoom" from the CSS made no difference.

In my case I'm using JQueryUI tabs, with the contents lazy loaded from Ajax. If the tabs aren't all precisely the same height, then as the tabs change in depth, all my html naturally copes with that, except the buttons appear frozen in space. So as you change tabs, the buttons bounce around, even though they are outside the tab.

Setting the tabs to all the same height would mask the effect, but it's not practical to do that for other reasons.

IE6 and 8 work fine, as does chrome and FF, it's just IE7.

[fracmak]

IE7 has issues with overflowing divs (both scroll and hidden), adding "position:relative;" to the scrolling div fixes the issue, this isn't something that the ui-button control can really control/detect

[Scott González]

Closing per fracmak's comment.

[[email protected]…]

Workaround #1: Posted above: "position:relative;" answer was vague and in my case didn't seem to help, accordion or input[type=submit] or my jquery ui tabs' content. Could someone post on jsfiddle.net an example with solution that kicks in using: setTimeout(function () {

/*your fix here*/

}, 5000);

Workaround #2: $(window).resize(function() {

$('.missBehavingElements').focus();

});

[shershen]

the same problem in IE 9 - only on button where added additional CSS style like {margin-left: 50px;}