Modal dialog with ui-lightness theme

Modal dialog with ui-lightness theme

Hi,
This code works well with the smoothness CSS theme.
However, with the ui-lightness CSS theme, the dialog popup window does not appear correctly. I mean the cross to close the the popup appears on the left side, under the title, instead of the right side. And the little thing in the bottom corner to increase the popup also appears on the left side, instead of the right side.
What's wrong with the code ? Thanks in advance for helping.
Here is the code :
  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     <html lang="en">
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
       <title>Test 2</title>
       <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
       
        <link type="text/css" href="js/plugins/jquery-ui-1.8.custom/css/ui-lightness/jquery-ui-1.8.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="js/plugins/jquery-ui-1.8.custom/js/jquery-ui-1.8.custom.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: false,
                    title: 'Dialogue basique',
                     height: 140,
            modal: true

                });

            $('#opener').click(function() {
                $dialog.dialog('open');
            });
        });
       
        </script>
      
     </head>
     <body>
     <h1> TEST JQUERY  2 </h1>

    <button id="opener">Open the dialog</button>
     
     </body>
     </html>