dialog box looks weird

dialog box looks weird

I have a confirmation dialog like this:


  1. $(function() {
      $("#opener").click(function() {
        $("#dialog").dialog({
          resizable: false,
          height: "auto",
          width: 400,
          modal: true,
          buttons: {
                    "Logout": function()
                    {
                     $(this).dialog( "logout.php" ); // ????
                    },
                    Cancel: function()
                    {
                     $(this).dialog( "close" );
                    }
         }
        });
      });
    });

  2. <img src="cross.png" border="0" alt="Logout" id="opener" /><div id="dialog" title="Logout?"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>Are you sure you want to logout?</p></div>


It almost works fine but

1) How can I redirect the page to logout.php if confirmed?

2) On first page load, the page looks weird because of those div tag and the small dialog icon (!) is shown on a wrong place even if the logout icon is not clicked yet. But on first click of logout button, the page shows fine. How to fix it? where is the correct location to place the div tag on the source page to avoid this issue?