jQuery.dialog and IE6

I found out a problem with jQuery dialog functionality in the IE6 browser. When you define a modal dialog and open it on your page it adds an empty space to the bottom of the page and scrolls down to its end.

I have defined the dialog such way:

$("#myDialog").dialog({ modal: true, resizable: false, autoOpen: false, draggable: false, width: 800, height: 450, bgiframe: true });

The versions of jQuery UI was 1.8.2. So I found out that you need to fix the jQuery UI CSS (style.css).
Find a ‘ui-dialog’ selector and change a ‘position’ property from ‘relative’ to ‘absolute’:

.ui-dialog { position: absolute; padding: .2em; width: 300px; }

And then IE6 works like a charm

This entry was posted in IE6, jQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s