Firefox does not render <input> element inside JQuery modal dialog

I have tried to search for any clues but have not discovered any. Take a look at the following page:

http://jqtest.encorephoenix.com/withinput.aspx (JQuery modal popup with <input>)

Popup is renders correctly in IE, Chrome, Safari and Opera. Firefox 3.6.13 does not render the popup with correctly. You c开发者_C百科an view withoutinput.aspx at the same URL to see that Firefox renders it correctly, since this page does not have <input> element. I have tried the following with no resolution to this peculiar problem:

• Changed doctype
• Used to enclose <input>
• Used to enclose <input>
• Used all possible CSS display attributes for <input>

Any suggestions would be greatly appreciated.

The fix was suggested by mayur.unagar at http://forums.asp.net/t/1643984.aspx and it works in all browsers including Firefox, of course. :)

If you don't want to visit the link, the fix is to remove {overflow: hidden;} in .ui-dialog class from custom CSS for 1.8.8 JQuery UI. I have tested it in all current released versions of major browsers.

The div is positioned on top of page. For now I was able to get the display by adding margin-top of 100px to class

.ui-dialog .ui-dialog-titlebar
{
margin-top:100px;
}

I am exploring more on it. But others can try on it The pop up is also not working properly on IE9.

The problem may have something to do with the function that runs when the ready event is called.

If I paste this function into Firebug console and run it, the modal window is displayed:

$(function () {
    var dlg = jQuery("#divPopup").dialog({
        modal: true,
        draggable: true,
        resizable: false,
        show: 'Transfer',
        hide: 'Transfer',
        height: 400,
        width: 480,
        minHeight: 400,
        minWidth: 480,
        autoOpen: false
    });
    dlg.parent().appendTo(jQuery("#form1:first"));
});

This suggests that when this is called the first time, it's not being properly bound to the DOM elements. An HTML Validation error could be related, or the doctype.

I'm seeing warnings in my HTML Validator whereby the system thinks it's a different doctype. Additionally, any use of elements in a nonstandard manner could contribute to such behavior.

• The solution to this problem is a step by step reduction of elements on the page until the problem disappears, then to slowly add elements back in until you've found the one that throws off the parser.
• Alternatively, fix the doctype so it matches the standard of HTML coding used.