Login page Aligned left, need Centered

I have simple login page for our company email and it used to be centered but now with updated browsers (IE11, Chrome) it is left aligned.  I've looked through the html and alignment seems to be set to centered.  Can someone take a look at the code and let me know and maybe give a brief explanation on why it changed? Thanks.

Here's the site.
http://mail.wcsites.net/index.php

Here's the code
<!--
<STYLE>
<!--
/* Page Body properites */
 
body {text-align:center; padding-top:50px}
#darkWrapper {width:35%; text-align:center;background-color: #4475A5;border-top:#ADADAD 3px solid;border-bottom:#ADADAD 3px solid;}
#loginContain {width:225px; margin:0 auto; text-align:left;background-color: #ffffff; padding:15px; border:#ADADAD 3px solid;}
#formContain {width:275px; margin:0 auto; text-align:center; background:#4475A5; padding-top:40px;padding-bottom:40px;}
#logoContain {width:275px; margin:0 auto; text-align:center; }


/* Font used in login form */
.loginFormFont {
font-family: Arial, Helvetica, Sans-serif;
font-size: 8.5pt;
color:#333333;
}
/* Font used for title text on right side of page */
font.loginTitleFont {
font-family: Arial, Helvetica, Sans-serif;
font-size: 9.5pt;
font-weight: bold;
color:#333333;
}
/* Font used for title text on right side of page - when its a link */
font.loginTitleFont a {
color:#333333;
}
/* Font used for normal text on right side of page */
font.loginTextFont {
font-family: Arial, Helvetica, Sans-serif;
font-size: 8.5pt;
color:#333333;
}
/* Font used for normal text on right side of page - when its a link */
font.loginTextFont a {
color:#333333;
}
/* Font used for displaying login errors */
font.loginAlertFont {
font-family: Arial, Helvetica, Sans-serif;
font-size: 8.5pt;
font-weight: bold;
color:#990000;
}
/* Form input field properties (text fields and buttons) */
input.small {
font-family: Arial, Helvetica, Sans-serif;
font-size: 8.0pt;
}
/* Form input field properties (drop-down fields) */
select.small {
font-family: Arial, Helvetica, Sans-serif;
font-size: 8.0pt;
}
//-->
</STYLE>



</HEAD>
<BODY CLASS="loginBodyBGCOLOR" CENTERMARGIN="5" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">


<div id="logoContain"><img src="https://cp.rackspace.com/clients/webmail/mail_wcsites_net/images/west-logo-scaled.jpg  "/></div>
<div id="darkWrapper">
<div id="formContain">
<div id="loginContain">
<TABLE CELLSPACING="0" CELLPADDING="1" BORDER="0" BGCOLOR="#FFFFFF" width="100%">
    <FORM NAME="loginForm" ACTION="login.php" METHOD="POST" ONSUBMIT="submitForm()">
    <INPUT TYPE="HIDDEN" NAME="js_autodetect_results" VALUE="SMPREF_JS_OFF" />
    <INPUT TYPE="HIDDEN" NAME="just_logged_in" VALUE="1" />
    <INPUT TYPE="HIDDEN" NAME="type" VALUE="v3">
   
    <TR>
     <TD VALIGN="TOP" ALIGN="Center" NOWRAP><SCRIPT LANGUAGE="JavaScript">
      <!--
      //Find out if previous login failed
      var loginFailed = getQueryVariable('fail');
      if (loginFailed == '1') {
        document.write('<FONT CLASS="loginAlertFont">Login failed.<BR><BR></FONT>');
      }
      //-->
      </SCRIPT>
       <FONT CLASS="loginFormFont">Email Address:<BR>
        <IMG SRC="/images/spacer.gif" WIDTH="1" HEIGHT="3"><BR>
        <INPUT TYPE="TEXT" NAME="user_name" CLASS="small" STYLE="width:160px;"><BR>
        <IMG SRC="/images/spacer.gif" WIDTH="1" HEIGHT="5"><BR>
        Password:<BR>
        <IMG SRC="/images/spacer.gif" WIDTH="1" HEIGHT="3"><BR>
        <INPUT TYPE=PASSWORD NAME="password" CLASS="small" STYLE="width:105px;">
        <IMG SRC="/images/spacer.gif" WIDTH="3" HEIGHT="1"><INPUT TYPE="SUBMIT" VALUE="Log-In" CLASS="small" STYLE="width:50px;"></FONT>
       <!--###language###-->
       <BR><IMG SRC="/images/spacer.gif" WIDTH="1" HEIGHT="5"><BR>
       <TABLE CELLSPACING="1" CELLPADDING="0" BORDER="0">
         <TR>
           <TD><INPUT TYPE="CHECKBOX" NAME="remember" ID="remember" STYLE="width:12px;"></TD>
           <TD><LABEL FOR="remember"><FONT CLASS="loginFormFont"> Remember my info</FONT></LABEL></TD>
          </TR>
         <TR>
           <TD><INPUT TYPE="CHECKBOX" NAME="useSSL" ID="useSSL" STYLE="width:12px;" checked="yes"></TD>
           <TD VALIGN="MIDDLE"><LABEL FOR="useSSL"><FONT CLASS="loginFormFont"> Use SSL (Secure)</FONT></LABEL></TD>
          </TR>
         
        </TABLE>
       
  </FONT>
     </TD>
     </TR>
    </FORM>
   </TABLE>
</div>
</div>
</div>
<!-- Inserted by control panel -->
<SCRIPT LANGUAGE="JavaScript">
<!--
preloadForm();
//-->
</SCRIPT>
 </BODY>
</HTML> 

Open in new window

LVL 1
Vontech615Asked:
Who is Participating?
 
Tom BeckCommented:
Adding margin:0 auto to #darkWrapper seems to fix it in Chrome. Cannot test IE11 however. It could work there as well.
0
 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Hi,

Remove the  VALIGN="TOP" from line 77.

You have the Align definition twice!! first one is recognized and center is  not!!

Best Regards.

Salah
0
 
Vontech615Author Commented:
Ok, took it off, and cleared cache but still left aligned in bot IE and Chrome.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Hi,

Change text-align:left to text-align:center on line 8
0
 
Vontech615Author Commented:
Did that, that's just the text alignment though for the login boxes so it just centered that not the whole form itself.
0
 
COBOLdinosaurCommented:
The code is junk right out of the 20th century.  an you expect it to work correctly in a modern browser?

It does not come close to validating:
http://validator.w3.org/check?uri=http%3A%2F%2Fmail.wcsites.net%2Findex.php&charset=%28detect+automatically%29&doctype=Inline&group=0

Modern browser are mor particular about valid code than the old work horses that would eat anything.  You need to modernize at least a little if you want to use 21st century technology.

Cd&
0
 
Vontech615Author Commented:
I'm not a web dev, I'm just doing a favor for my boss at work.   I'm not skilled enough to know how to modernize, that's why I'm posted on EE, that I pay $13/mo for.  If I wanted a smart ass comment I would have posted on the myriad of free websites.  Thanks.
0
 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Hi,

I got it!!! you page is coded with many complexity!!

So you need to

Remove line 7 which contains: #darkWrapper {width:35%; text-align:center;background-color: #4475A5;border-top:#ADADAD 3px solid;border-bottom:#ADADAD 3px solid;}

Remove  line 67 which contains: <div id="darkWrapper">

Remove line 113 which contains: </div>

Modify line 9 (Vlue from 275 to 325) so the new line will contains: #formContain {width:325px; margin:0 auto; text-align:center; background:#4475A5; padding-top:40px;padding-bottom:40px;}

If you do this you will have your form centered.

Best Regards.

Salah
0
 
COBOLdinosaurCommented:
>>>that I pay $13/mo for.

I don't really care what arrangement you have with EE; I am not a party to that.  If you were paying my regular rate that monthly fee would buy you about 7 minutes of my time. As for the "smart ass comment"; you did not indicate your level of skill, and a professional would have used that comment as a guide to improve, instead of whining about doing a favor for the boss.  

I'm not here to kiss you on the cheek, and powder your butt. When I see trash; I point it out and the majority of the users are professional who respond by addressing the issues instead of showing disrespect to people who volunteer to help from our own free time without compensation.

If you possessed any integrity you would apologize for your remarks.

Cd&
0
 
Tom BeckCommented:
Did you try my simple suggestion on this post?
0
 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Hi Vontech615,

Just follow my guidance, I did change the code after saving your page and test the modification.

See the attachment for the correct output.

Best regards.

Salah
0
 
Vontech615Author Commented:
Really COBOL? No I'm not apologizing for my comment and no I'm not carrying on this discussion.

@Tom.. Thanks for that suggestion. Not yet but will try it tomorrow and reply back.
0
 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Hi Vontech615,

I'm giving the right solution, if you don't care let me know so I'll not follow this question!!Output.PNGOutput.PNG
0
 
Vontech615Author Commented:
Hey Sarah,

Thanks for all your effort. I haven't had a chance to try your suggestion. I will tomorrow and let you know. Thanks again.
0
 
Vontech615Author Commented:
Salah! Sorry auto-corrected on mobile.
0
 
Salah Eddine ELMRABETTechnical Lead Manager (Owner)Commented:
Good luck
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Vontech615,
I'm not an apologist for COBOL. But I will tell you that he is probably one of the most knowledgable experts here on EE. He has a straight forward no kit gloves kind of approach that, ahem, takes some getting used to.

I will, however, stand with him on his assessment of your code. It is ANCIENT. I haven't seen that kind of HTML in years. This is only the beginning of your bosses problems with the site. It will continue to break in strikingly curious ways as browsers upgrade. I'm hoping that it is only the form coded in this fashion and that the rest of the site is coded with web standards for modern browsers and is responsive. In April, Google will start giving negative marks to non-responsive websites.

I would highly suggest your boss invest in a site redesign. This is only the beginning of the pain. And I'm not going to be an enabler by suggesting ways to fix that archaic code.

Sorry. This is tough love.
0
 
Vontech615Author Commented:
Awarding some points to Salah for effort but Tom Beck solved the problem with his suggestions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.