Why jQuery dialogs produces a "height value" when it opens?

I can't understand a thing. When I have a jQuery dialog matched by a button...and this dialog come up from a 'display:none' state..well..why this dialog produces a "height value" in the page?

I would mean, when dialog is open..the right common scrolling bar become more long and, at the same time, the page has a large white space (when you scroll it out).

Is anyone with the same problem? Is anyone that can please give me an explanation?

---

please apologyze me if I'm late with the response.

Note that dialog produces "more height value" in all browsers. I don't know why it happens.

Here you are a little code:

<script type="text/javascript">
$(document).ready(function() {
 $('<div class="error-dialog"></div>')
  .show('fade')
  .html('This dialog will show every time! <input id="close" type="button" value="Chiudi" />')
  .dialog({
    autoOpen: true,
    closeOnEscape: false,
    draggable: false,
    height: 'auto',
    modal: false,
    position: ['right','top']
 });

 $('#close').click(function() {
  $('.error-dialog').hide('fade', function() {
   $(this).dialog('destroy');
  });
 });

 setTimeout(function() {
  $('.error-dialog').hide('fade', function() { $(this).dialog('destroy'); });
 }, 2000);
});
</script>

This piece of code is inserted in a php value and then, with an echo statement, i开发者_如何学Gos displayed on desktop after a (wrong) form submission. This dialog will be displayed (as declared in the code) at the right-top but...look at the empty space...

Note that if you use echo statement through php you'll need to escape double-quotes.

Thanks in advance.