Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#5281 closed bug (wontfix)

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:


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.

Change History (11)

comment:1 Changed 9 years ago by Scott González

Milestone: TBD1.8

comment:2 Changed 9 years ago by 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.

comment:3 Changed 8 years ago by 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

comment:4 Changed 8 years ago by Scott González

Owner: set to getimoliver
Status: newpending

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

comment:5 Changed 8 years ago by Lodewijk

We're having the same problem. Here is a minimal testcase in jsFiddle:

comment:6 Changed 8 years ago by Scott González

Status: pendingopen

comment:7 Changed 8 years ago by 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.

comment:8 Changed 8 years ago by 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

comment:9 Changed 8 years ago by Scott González

Resolution: wontfix
Status: openclosed

Closing per fracmak's comment.

comment:10 Changed 8 years ago by whittet@…

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 an example with solution that kicks in using: setTimeout(function () {

/*your fix here*/

}, 5000);

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



comment:11 Changed 8 years ago by shershen

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

Note: See TracTickets for help on using tickets.