IE text input problem with dialogs

IE text input problem with dialogs

Hi, I have a problem with some text inputs, inside a dialog, being displayed incorrectly in IE. I'm using jQuery 1.3.2 and jQuery UI 1.7.2.

I have a very simple form inside a dialog. I'm using a table for the layout and some labels and inputs. 
With webkit or mozilla everything works fine, but with IE6 and 7 (I haven't tested it with IE8) I get some shrunken inputs (check the attachment).

Has anyone faced this problem? Am I doing something that I shouldn't be doing?

Here's the code:

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <title>Test page</title>
  7.     <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  8.     <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
  9.     <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
  10.   </head>
  11.   <body>
  12.     <div id="trigger-dialog" title="New trigger">
  13.       <form id="trigger-form" action="">
  14.         <table>
  15.           <tbody>
  16.             <tr>
  17.               <td><label for="triggerID">Name:</label><em>*</em></td>
  18.               <td><input type="text" name="triggerID" id="triggerID" maxlength="50" size="50" class="ui-widget-content ui-corner-all ui-state-default" /></td>
  19.             </tr>
  20.             <tr>
  21.               <td><label for="triggerFQL">Query (FQL):</label><em>*</em></td>
  22.               <td><textarea name="triggerFQL" id="triggerFQL" rows="7" cols="47" class="ui-widget-content ui-corner-all ui-state-default"></textarea></td>
  23.             </tr>
  24.             <tr>
  25.               <td><label for="qtPipeline">QT Pipeline:</label><em>*</em></td>
  26.               <td><input type="text" name="qtPipeline" id="qtPipeline" maxlength="50" size="50" class="ui-widget-content ui-corner-all ui-state-default" /></td>
  27.             </tr>
  28.             <tr>
  29.               <td><label for="datepicker">Expiration date:</label></td>
  30.               <td><input type="text" name="datepicker" id="datepicker" class="ui-widget-content ui-corner-all ui-state-default" /></td>
  31.             </tr>
  32.           </tbody>
  33.         </table>
  34.       </form>
  35.     </div>
  36.     <script type="text/javascript">
  37.       $(function () {
  38.         $("#datepicker").datepicker({ dateFormat: "mm/dd/yy" });
  39.         $('#trigger-dialog').dialog({ 
  40.           autoOpen: true, modal: true, width: 600, show: 'scale', hide: 'scale',
  41.           title: 'New trigger',
  42.           close: function(event, ui) {
  43.               console.log('close');
  44.           },
  45.           buttons: { 
  46.               "OK": function() {
  47.                 console.log('ok');
  48.               }, 
  49.               "Cancel": function() {
  50.                 console.log('cancel');
  51.                 $(this).dialog('close');
  52.               } 
  53.           }
  54.         });
  55.       });
  56.     </script>
  57.   </body>
  58. </html>

Cheers!