Jquery dialog form submission

Question

I have to choices for a user to make at a sign in form. They can either submit or cancel. If they click submit then they get this :

if they cancel they get this :

I have a minor issue that does not bother me but will bother my supervisor (which in turn will bother me -_-)

if you notice the [x] on the popup of the confirmation dialog it is out of place because it is not centered in the x box, it is outside of it, and I do not know why this could be possibly happening.

This is my Jq :

<script>

$(document).on('submit', "#signinform", function(e)
{
    e.preventDefault();
    var href = '<?php echo base_url();?>studentlogin_controller/agree';
    $("#dialog-confirm").dialog(
    {
        resizable: false,
        draggable: false,
        height: 310,
        width: 500,
        modal: true,
        buttons: 
        {
            "Cancel": function() 
            {
                $(this).dialog("close");
            },
            "Enter Queue": function() 
            {
                window.location.href = href;
            }
        }
    });
});

$(document).on('click', "#Cancel", function(e)
{
    e.preventDefault();
    var href = '<?php echo base_url();?>studentlogin_controller/studentlogin';
    $("#dialog-noconfirm").dialog(
    {
        resizable: false,
        draggable: false,
        height: 310,
        width: 500,
        modal: true,
        buttons: 
        {
            "Cancel": function() 
                {
                    $(this).dialog("close");
                },
                    "Go Back": function() 
                {
                    window.location.href = href;
                }
        }
    });
});

    </script>

And my HTML :

<div id="dialog-confirm" title="Please Confirm" style="display: none;">
    <ul>
        <li>By clicking <FONT COLOR="red">"Enter Queue"</FONT> counselors will be notified that you here - please take a seat</li>
<br>
        <li>If You click <FONT COLOR="red">"Cancel"</FONT> you will not be inserted into the Student Queue</li>
    </ul>
</div>

<div id="dialog-noconfirm" title="Please Confirm" style="display: none;">
    <ul>
        <li>By clicking <FONT COLOR="red">"Go Back"</FONT> your information will be removed from the current session</li>
<br>
        <li>If You click <FONT COLOR="red">"Cancel"</FONT> your information will still be active and you will stay on the current page</li>
    </ul>
</div>

And this is my theme includes and CSS :

<link rel="stylesheet" href="<?php echo base_url(); ?>css/mainstyle.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/secondarystyles.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>javascript/themes/smoothness/jquery-ui-1.8.4.custom.css"/>

<script src="<?php echo base_url(); ?>javascript/js/jquery.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>javascript/js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>

And this is happening in google chrome.

Answer 1

I didn't know why I didn't check this earlier..

sorry for the question SO community, found the answer after using google chrome tools :

Line 446 -> margin: 1px;

was causing the error... this was in the jquery custom ui version 1.8.4 I also changed some other things in there to make it look better (I could of probably did this in-line...) sorry for not doing my own in depth look of the issue with some sort of browser tool.

Answer 2

Could you inspect the 'x' button element in chrome? It looks like the CSS is giving it some padding or margin