Jquery-UI modal form close button display position
jquery-ui, position
Solution
You seem to be using the incorrect stylesheet (version 1.9.0). Linking to version 1.10.0 of the CSS seems to have fixed it: http://jsbin.com/atenac/8/edit
The correct CSS link is: http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css
Problem
I have a display problem with the close button on the top right corner on jquery ui modal form. I had as an example: http://jqueryui.com/dialog/#modal-form So I made: http://jsbin.com/atenac/3/edit If you click Create new user you should see that the close icon is not displayed correctly. I tested with chrome(latest) and IE9. And it is shown from the bottom right corner of the actual container. Is there a problem with the themes, or am I missing something? If you change to base cdn it works, but with any other css it's not working. Code: ``` <head> <!-- base cdn: http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css--> <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> </head> <body> <div id="dialog-form" title="Create new user"> <p class="validateTips"> All form fields are required.</p> <form> <fieldset> <label for="name"> Name</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> <label for="email"> Email</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> <label for="password"> Password</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> </fieldset> </form> </div> <button id="create-user"> Create new user</button> </body> <script> $(function () { $("#dialog-form").dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "Create an account": function () { allFields.removeClass("ui-state-error"); $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } }, close: function () { allFields.val("").removeClass("ui-state-error"); } }); $("#create-user") .button() .click(function () { $("#dialog-form").dialog("open"); }); }); </script> ```