Why is the styling messed up on this dialog?

When I open up a dialog the styling seems kind of messed up. The close 开发者_JS百科icon is not where it should be, the borders look too big. Here is a link in JsFiddle

I am using JQuery 1.5.1 and JQuery-ui-1.8.11.

JSFiddle

chobo, the problem with your sample was missing the required JS and CSS files to perform the Dialog action.

please review this link as I've fixed your sample to include the required files

http://jsfiddle.net/dcc5A/3/

check them from the left corner under "Manage Resources"

please mark as answer if it helped you.

It doesn't look like you have any of the CSS for the dialog. There is a link in your CSS file, go to that link, then choose download Theme, and make sure you choose dialog under the widgets before you click "Download".

Your css is missing the dialog code.

• Either add:

/* Dialog
----------------------------------*/
.ui-dialog { position: relative; padding: .2em; width: 300px; }
.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

• Or you can use the theme roller to make your own css, make sure you tick the options you need.

• Or you can use one of the standard theme's, you can even use it from the Google CDN

Could be because jsFiddle does not include CSS or images in it's implementation of jQuery UI?