Jquery Dialog Too Big?

The jquery dialog box is ridiculously huge and I'm not sure why. Manually setting CSS does not appear to work either. Click the 'Sign-In' button to see the dialog box.

Here is the site I'm currently working on.


For reference for later as code will change here is the code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
    <link rel="stylesheet" href="fontkit/stylesheet.css" type="text/css" />

    <script type="text/javascript" src="js/html5.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

    <!--accordion -->
    <script type="text/javascript" src="accordion/javascript.js"> </script>
    <link href="accordion/format.css" rel="stylesheet" type="text/css" />
    <!--accordion -->

    <!--Tab -->
    <link href="css/tab-style.css" rel="stylesheet" type="text/css" />

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css" />

        //Hide Other Modules.
        $(document).ready(function() {
              autoOpen: false,
              position: {my:"center", at: "center", of: window},
              resizable: false,
              show: {
                effect: "blind",
                duration: 500
              hide: {
                effect: "explode",
                duration: 500
              buttons: [{ 
                text: "Sign In",
                click: function() {
                    $( this ).dialog( "close" ); 

                console.log('Opening Sign In Dialog');

            $(".module").each(function( index ) {

                    //Set every nav item to not have current class

                //Because the modules go in sequential order, we can use the number to determine which is which.
                var number = $(this).attr('number');
                var i = 0;
                $(".module").each(function( index ) {
                        $(".module").each(function( index ) {


            //Default Action
            jQuery(".tab_content").hide(); //Hide all content
            jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
            jQuery(".tab_content:first").show(); //Show first tab content

            //On Click Event
            jQuery("ul.tabs li").click(function() {
                jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
                jQuery(this).addClass("active"); //Add "active" class to selected tab
                jQuery(".tab_content").hide(); //Hide all tab content
                var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                jQuery(activeTab).fadeIn(); //Fade in the active content
                return false;
    <div id="signindialog" title="Login" style="height:200px">
        <div>Username:<input type="text" value="" id="usernamelogin"/></div>
        <div>Password:<input type="password" value="" id="passwordlogin"/></div>
    <section class="centColl">
        <!--Header -->
            <div class="headerMain">
                <h1 class="logo">
                    <a href="index.php"><img src="images/tcf-logo.png" alt=""></a>
                <div class="insdieTip">
                    <a href="insidertips.html" class="orange btnsmall"><span class="tips">Insider Tips</span></a>
                    <span>&nbsp;<a href="#" id="register">Register</a> | <a href="#" id="signin">Sign in</a></span>
                <nav class="topnav">
                    <a href="index.php" class="text16">Our System</a>
                    <a href="crowdfunding-news.php" class="text16">Crowdfunding News</a>
                    <a href="services.php">Services</a>
                    <a href="community.php">Community</a>
                    <a href="company.php">Company</a>

        <!--Header -->

Please help me figure out why? I'm not sure what is causing the issue. I've got this to work on my other sites (dnfinder.com, but not this one for some reason).


There's a lot going on there, however if you remove the

content: "."

from jquery-ui.css (line 12)


and then specify a height in the second DIV on the page rather than auto

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" 
style="width: 400px; top: 0px; display: block; height: 400px; left: 507.5px;" tabindex="-1" 

things start to look a bit more normal - hopefully this gives you somewhere to start your analysis from....

Need Your Help

Ormlite mapping fields to a simple member class

java android ormlite

I'm experimenting with ORMLite for android.

managing array of structures vb.net

winforms arrays structure

i need to work with 100,000 list of data. sometimes need to remove an item close to the end or middle.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.