I am using jquery UI's dialog widget to render a modal dialog in my web application. I do this by passing the ID of the desired DOM element into the following function:

var setupDialog = function (eltId) {
  $("#" + eltId).dialog({
    autoOpen: false,
    width: 610,
    minWidth: 610,
    height: 450,
    minHeight: 200,
    modal: true,
    resizable: false,
    draggable: false,
  });
};

Everything works just fine in Firefox, Safari, and Chrome. However, in IE 8 when the dialog is opened only the div.ui-dialog-titlebar is visible -- the div.ui-dialog-contents are not.

The problem seems to be that while in the modern browsers, the div.ui-dialog-contents has a specific height set in its style, i.e. after opening the dialog, the resulting HTML is:

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="width: auto; min-height: 198px; height: 448px">...</div>

while in IE8 the height style attribute is set to zero, and the resulting HTML is:

<div class="ui-dialog-content ui-widget-content" id="invite-friends-dialog"
     style="min-height: 0px; width: auto; height: 0px">...</div>

What do I need to do to get the height (and min-height) style attributes set correctly?