dialog widget the x mark is slightly off the close button

dialog widget the x mark is slightly off the close button

I am using dialog UI widget. The x mark in the top right hand corner is is not centered on the button, but is slightly lower right.

I am using following libraries:

<script src="~/Scripts/jquery-2.1.1.js"></script>

<script src="~/Scripts/jquery-ui-1.11.1.js"></script>

<script src="~/Scripts/jquery-ui.min-1.11.1.js"></script>

<script src="~/Scripts/jquery.tablesorter.js"></script>

<script src="~/Scripts/jquery.tablesorter.pager.js"></script>

<script src="~/Scripts/jquery.tablesorter.widgets.js"></script>

<link href="~/Content/tablesorter.css" rel="stylesheet" />

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="~/Scripts/jquery.validate.js"></script>

@*Following added to address dialog box not working issue*@

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

@*Above added to address dialog box not working issue*@

the documentation demo shows perfect placement of the x mark. How can I set it right please?