Tabbed dialog

http://stackoverflow.com/questions/4378081/why-does-this-tabbed-dialog-work-in-firefox-but-not-in-chrome-or-ie

by FloEdelmann

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
<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">
                some jobs
            </div>
        </div>
</div>

CSS

body {
    font-size:10px;
}

JavaScript

$.fn.tabbedDialog = function () {
    this.tabs();
    this.dialog({'modal':true,'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');
}
$('#tenant').tabbedDialog();