jquery ui modal dialog problems in IE

Question

I use jquery ui dialog widget. Everything works fine in FF, Opera etc., except IE. The problem is that when dialog is opened in Internet Explorer, some space (not covered with that "modal gray layer") is added at the bottom of the document, and page is scrolled to the bottom. So I don't even see the dialog, I have to scroll up, to see it fully. Anyone had that problems? Any solutions? EDIT: now I see, that this "bottom space" is also added in FireFox, but it doesn't scroll to it like in IE.

Accepted Answer

I found out what was wrong. That dialog (and everyone else) had CSS style:

```
position: relative;
```

and therefore occupied space at the bottom of the document (where it is added).

The strange thing is, this style comes directly from jquery-ui-1.7.2.custom.css file, which I downloaded from jquery site without altering.

So I used more specific (i.e. higher priority selector) to assign absolute positioning:

```
position: absolute;
```

It may be jquery-ui bug or me using it wrong or not getting something. But it's quite obvious that "top" (global) dialog box appended to body element should be positioned in absolute manner.

jquery ui modal dialog problems in IE

Solution

Problem