Aligning title and close text in jquery ui dialog not working IE7 and 6

Question

I am trying to align title text to the left and close text to the right in jQuery dialog title bar. It works in all browsers i tested except IE6 and 7. In IE6/7 the close text is right aligned but appears a line below the title text and is outside the titlebar of the dialog so is not visible. See the image below: https://docs.google.com/document/d/1B-syu0IiTh27kb4D9nXhfZkpjACgZnOWIPDhOTRdMWQ/edit

Here is some code im using

/**IE 7 has a ui dialog positioning issue with jquery UI 1.8 above , the below seems to solve it **/
.ui-dialog{ position: absolute;  width: 100%;}


.ui-icon  
{
  background-image: url("") !important; 
  text-align: right;
}
.ui-dialog-title-dialog 
{
  float: left;
}
.ui-dialog-titlebar-close
{
  font-size: 16px;
  float: right;
}

.ui-dialog-title
{ 
  font-size: 16px;
  padding: 4px;
  padding-right: 50px;
}

.ui-dialog-titlebar
{
  padding: 4px;
  background-color : #FFF;
}

$("#dialog").dialog({ autoOpen: false, width: area.width, height: area.height, modal: true, closeText: "閉じる", title: '<a href="#" id="hideAll">説明を非表示</a> ' });

Answer 1

I solved this using some jquery and padding right based on the width of the dialog.Not the best solution but it works.

$('.ui-dialog-title').css("padding-right", (dialog.width - closeTextWidth) + "px");