jquery ui dialog messed up if HTML is inside

Question

So here is my HTML:

<a href="#/" class="next openModalBox lessOpacity">Posunúť sa dopredu</a>
<div id="modalBoxContent">
    <p style="font-size: .8em; text-align: center;">
    Úspešne ste absolvovali študijnú časť školenia.
        Pre ukončenie školenia je potrebné úspešne absolvovať <a href="/index/index" class="accessible-link">záverečný test</a>.
</p>
</div>

And my JS:

$(document).ready(function() {

    // vytvorenie kurzu
    $('a.openModalBox').click(function(e) {
        var href = $(this).attr('href');
        if ('#/' == href) {
            e.preventDefault();
            $('#modalBoxContent').dialog({
                modal: true,
                resizable: false,
                title: 'Upozornenie',
                zIndex: 1,
                show: 'fast',
                hide: 'slow',
                width: 600,
                height: 90,
                position: 'middle'
            }).width(600);
        }
    });

});

The problem is the dialog window is messed up. This is its HTML:

<div style="width: 1920px; height: 862px; z-index: 2;" class="ui-widget-overlay"></div>
<div aria-labelledby="ui-dialog-title-modalBoxContent" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" style="display: block; z-index: 3; outline: 0px none; height: auto; width: 600px; top: 381px; left: 655px;">
<div style="-moz-user-select: none;" unselectable="on" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span style="-moz-user-select: none;" unselectable="on" id="ui-dialog-title-modalBoxContent" class="ui-dialog-title">Upozornenie</span>
<a style="-moz-user-select: none;" unselectable="on" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#"><span style="-moz-user-select: none;" unselectable="on" class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" style="display: block; width: 600px; min-height: 0px; height: 36px;" id="modalBoxContent">
                    <p style="font-size: 0.8em; text-align: center;">
                        Úspešne ste absolvovali študijnú časť školenia.
Pre ukončenie školenia je potrebné úspešne absolvovať <a href="/index/index" class="accessible-link">záverečný test</a>.
                    </p>

</div></div>

It looks like this:

http://i51.tinypic.com/2ai4oro.jpg

When there just a text inside the #modalBoxContent, the dialog window looks as it is supposed to. It looks messed up only when there is some HTML.

Answer 1

What you have works, you can test it here. Make sure that you're HTML is valid and there aren't any unclosed/invalid tags, also make sure that your CSS isn't interfering (this is likely the cause). Try just not including your own stylesheet (but still including the jQuery UI one) and see if it resolves the issue.