Having trouble with jQuery dialog height

Question

I can't seem to get the dialog to open to the height I want, I can see the title bar, but don't get the content until I expand the dialog with my mouse

My Code http://jsfiddle.net/Uu2G4/3/

<div id="ImageDialog" style="display:none;height:500px;" class="ImageDialog ui-dialog">
    <div style="height:500px;">
        This is making me crazy!!!!
        <img class="productImage" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
    </div>
</div>

$(document).ready(function () {
    // init the image popup dialog
    $("#ImageDialog").dialog({ autoOpen: false, height: 500 });

    $(".open").click(function()
                 {
                     $("#ImageDialog").dialog("open");
                 });

    $(".close").click(function()
                 {
                     $("#ImageDialog").dialog("close");
                 });
});

Answer 1

I set the class of the div to ui-dialog in the HTML

removing this fixed the problem.

<div id="ImageDialog" style="display:none;height:500px;" class="ImageDialog">
    <div style="height:500px;">
        This is making me crazy!!!!
        <img class="productImage" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
    </div>
</div>

$(document).ready(function () {
    // init the image popup dialog
    $("#ImageDialog").dialog({ autoOpen: false, height: 500 });

    $(".open").click(function()
                 {
                     $("#ImageDialog").dialog("open");
                 });

    $(".close").click(function()
                 {
                     $("#ImageDialog").dialog("close");
                 });
});