#5281 closed bug (wontfix)

Opened March 04, 2010 11:36PM UTC

Closed May 16, 2011 01:19PM UTC

Last modified October 17, 2011 07:50AM UTC

Button is positioned incorrectly in IE7

Reported by: getimoliver Owned by: getimoliver
Priority: minor Milestone: 1.9.0
Component: ui.button Version: 1.8rc3
Keywords: positioning Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (11)

Changed March 10, 2010 04:55PM UTC by scottgonzalez comment:1

milestone: TBD → 1.8

Changed November 25, 2010 03:24AM UTC by spudly comment:2

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.

Changed December 29, 2010 01:33PM UTC by AmitPatel comment:3

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

Changed January 12, 2011 01:21AM UTC by scottgonzalez comment:4

owner: → getimoliver
status: new → pending

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

Changed January 24, 2011 09:54AM UTC by Lodewijk comment:5

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

Changed January 24, 2011 02:53PM UTC by scottgonzalez comment:6

status: pending → open

Changed February 25, 2011 04:39PM UTC by philw comment:7

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.

Changed May 13, 2011 07:52PM UTC by fracmak comment:8

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

Changed May 16, 2011 01:19PM UTC by scottgonzalez comment:9

resolution: → wontfix
status: open → closed

Closing per fracmak's comment.

Changed July 12, 2011 08:41PM UTC by whittet@gmail.com comment:10

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();

});

Changed October 17, 2011 07:50AM UTC by shershen comment:11

the same problem in IE 9 -

only on button where added additional CSS style like {margin-left: 50px;}