jQuery ui dialog show top right button but no x on it

Getting weird behavior between different versions of Chrome. On my development machine I am using Chrome version 13.0.782.32 beta-m, and one of my testers is using version 8.xxx. I am using jQuery ui to display a dialog. In chrome 13.xxx everything displays fine. In chrome 8.xxx, the top right button is not displayed.

Here is an example of my code. We are using an object literal to namespace our code.

var ourAppName = {};

ourAppName.displayDialog = function (title, body, defaults) {

    var html = '<div style="display:none;">' + ((body != undefined || body != null) ? body : 'No body (message) provided') + '</div>';

    $(html).appendTo('body').dialog(
        {
            height: (defaults != undefined || defaults != null) ? (defaults.height === undefined ? 105 : defaults.height) : 105,
            width: (defaults != undefined || defaults != null) ? (defaults.width === undefined ? 640 : defaults.width) : 640,
            modal: (defaults != undefined || defaults != null) ? (defaults.modal === undefined ? true : defaults.modal) : true,
            position: (defaults != undefined || defaults != null) ? (defaults.position === undefined ? 'center' : defaults.position) : 'center',
            autoOpen: (defaults != undefined || defaults != null) ? (defaults.autoOpen === undefined ? false : defaults.autoOpen) : false,
            title: (title != undefined || title != null) ? title : 'No title provided',
            closeOnEscape: (defaults != undefined || defaults != null) ? (defaults.closeOnEscape === undefined ? true : defaults.closeOnEscape) : true,
            resizable: (defaults != undefined || defaults != null) ? (defaults.resizable === undefined ? false : defaults.resizable) : false,
            draggable: (defaults != undefined || defaults != null) ? (defaults.draggable === undefined ? false : defaults.draggable) : false,
            overlay: (defaults != undefined || defaults != null) ? (defaults.overlay === undefined ? { opacity: 0, background: '#000000'} : defaults.overlay) : { opacity: 0, background: '#000000' },
            buttons: (defaults != undefined || defaults != null) ? (defaults.buttons === undefined ? { } : defaults.buttons) : { }
        }
    ).dialog('open').show();

};

Then, in my bound click event in a different js file, i have

$("[id$=_DownloadFileLinkButton]").click(function () {
    ourAppName.displayDialog(
        "Downloading",
        "<div style='padding-top:28px;'>Your download will begin momentarily.</div>",
        {
            height:20
        }
    );
});

Could this be something with the version of chrome or is it something with my code?

UPDATE:

Looks like still even happens in the latest vers开发者_Go百科ion of chrome. Weird thing is, it only appears to occurr the first time in after logging in. If I either refresh the page or navigate to a different page, the x is there.

---

It's probably a Chrome issue if it works in a later version. Just use http://jsfiddle.net/SEBNv/ in Chrome 8, inspect the element on the page where the icon should be and see if the icon is either positioned badly or hidden in some way.