Why does this jQuery tabbedDialog plugin only work in Firefox?

I found this jQuery code to create a tabbed dialog:

$('#tenant').tabbedDialog();

$.fn.tabbedDialog = function () {
    this.tabs();
    this.dialog({'modal':true,'width':800, 'height':600,'minWidth':400, 'minHeight':300,'draggable':true});
    this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close'));
    this.find('.ui-tab-dialog-close').css({'position':'absolute','right':'0', 'top':'23px'});
    this.find('.ui-tab-dialog-close > a').css({'float':'none','padding':'0'});
    var tabul = this.find('ul:first');
    this.parent().addClass('ui-tabs').prepend(tabul).draggable('option','handle',tabul); 
    this.siblings('.ui-dialog-titlebar').remove();
    tabul.addClass('ui-dialog-titlebar');
}

<div id="tenant">
        <ul>
            <li><a href="#tenant_details">My Tenant</a></li>
            <li><a href="#tenant_events">Events</a></li>
            <li><a href="#tenant_jobs">Jobs</a></li>
            <li class="ui-tab-dialog-close"></li>
        </ul>
        <div>
            <div id="tenant_details">
                some details
            </div>
            <div id="tenant_events">
                some events
            </div>
            <div id="tenant_jobs">开发者_如何学JAVA
                some jobs
            </div>
        </div>
</div>

Unfortunately it only seems to work in Firefox.

I tested it in Chrome 8 (displays nothing) and IE8 (shows tab content on main page) and it doesn't work properly in either.

Any guesses why not?

jsfiddle demo

Instead of trying to troubleshoot this old code, try using this, which I've personally used: http://jqueryui.com/demos/tabs/