#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: |
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.
Change History (11)
comment:1 Changed 13 years ago by
Milestone: | TBD → 1.8 |
---|
comment:2 Changed 12 years ago by
comment:3 Changed 12 years ago by
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 12 years ago by
Owner: | set to 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.
comment:5 Changed 12 years ago by
We're having the same problem. Here is a minimal testcase in jsFiddle: http://jsfiddle.net/qqW6b/4/
comment:6 Changed 12 years ago by
Status: | pending → open |
---|
comment:7 Changed 12 years ago by
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 12 years ago by
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 12 years ago by
Resolution: | → wontfix |
---|---|
Status: | open → closed |
Closing per fracmak's comment.
comment:10 Changed 12 years ago by
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();
});
comment:11 Changed 11 years ago by
the same problem in IE 9 - only on button where added additional CSS style like {margin-left: 50px;}
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.