off center x in jquery dialog window

Question

i am using a standard jquery dialog window and the X button in the upper right that closes the window, is not centered in the box. Im sure this has been asked before, my google skills are lacking today... any help would be much appreciated.

the element that is not "centered" is

 <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>

which should be in

 <span class="ui-button-text">close</span>

couldnt get jfiddle to work. I havent slept in awhile either...

here is the code:

 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 <!--<script src='spin.js'></script>-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>


 <script>
 $(function(){
$('#dialog').dialog({
    autoOpen: false,
    width: 800,

    modal: true,
    position: {
        my: "top",
        at: "top"
    },
    resizable: false,
    buttons: {
             "Go": function () {

                 $('#dialog').html('hello');
             },
            "Cancel": function () {

                 $(this).dialog("close");
             }
    }
});
$('#subButton').click(function () {
    $('#dialog').html("look at x");
    $('#dialog').dialog('open');
});
 });
 </script>
 <form name='stuff' method='POST'>
<input type='button' id='subButton' value='Confirm Settings'>
 </form>
 <div id='dialog'></div>

Answer 1

I experienced this issue when my jQuery UI scripts and CSS themes were different versions. In my case I was upgrading jQuery UI and didn't think about the need to change the stylesheets.

My suggestion would be to either rebundle the whole lot and start from fresh, or find the theme you normally use in the ThemeRoller, and replace your UI CSS with that stylesheet.

Answer 2

The specific issue is on the position of the button icon .ui-icon-closethick I am using the following css and js:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

The issue still exists with the x button icon misaligned on the dialog and no other css is being referenced on the page. I ended up creating an override to correct the button icon alignment issue.

<style>
.ui-dialog-titlebar-close .ui-icon-closethick {
    position: relative !important;
    margin-top: -1px  !important; 
    margin-left: -8px  !important;
} 
</style>