jquery dialog displaying ugly title

Question

hello

i have dialog working but it looks nothing like the demo at jquery.com i have the theme css and the js files and referenced, but it looks ugly. big text and the title and 'x' are out of position. i have placed a grab at:

http://picasaweb.google.com/100992319569544717409/DialogPics

and would be grateful if someone could explain why this is happening. many thanks

// Help function

            function help(){ 

                $(function() {

                 $('#help').dialog(
        { 
            title:"Mail Help",
            width: 416,
            height: 340,
            modal: true,
            overlay: { backgroundColor: "#000", opacity: 0.5 }


        });$("#help").dialog('open');
          });
         }

this is what i have for referencing files:

<script src="/sample/admin/js/jquery-1.3.2.min.js"></script>
<script src="/sample/admin/js/jquery-ui-1.7.3.custom.min.js"></script>
<script src="/sample/admin/js/ui.dialog.js"></script>
<script src="/sample/admin/js/ui.core.js"></script>

<link href="/sample/admin/css/smoothness/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" />
<link href="/sample/admin/css/themes/base/ui.all.css" rel="stylesheet" type="text/css" />

thank you.

Answer 1

Have you imported jQuery-UI CSS into your project? You can utilize what they provide, or roll your own. The jQuery UI dialog relies on this to make everything look "pretty."

Answer 2

It looks like you've included too much. you should only have 2 scripts: one for jQuery, one for jQuery UI. You should only be using one CSS file for this, the jQueryUI theme CSS file.

For example, this is what I use on a real website:

<link type="text/css" href="./jQuery/jQueryUI/css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" />

<script type="text/javascript" src="./jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./jQuery/jQueryUI/js/jquery-ui-1.8.4.custom.min.js"></script>

You should download your own version of jqueryUI if you haven't already and start from there http://jqueryui.com/download

Include only these three things for your jqueryUI. You may include your own additional css/javascript files, but you don't need more than these for jqueryUI.