asked on

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

Salah Eddine ELMRABET

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

Vontech615

ASKER

Ok, took it off, and cleared cache but still left aligned in bot IE and Chrome.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Salah Eddine ELMRABET

Hi,

Change text-align:left to text-align:center on line 8

Vontech615

ASKER

Did that, that's just the text alignment though for the login boxes so it just centered that not the whole form itself.

COBOLdinosaur

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&

Vontech615

ASKER

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.

SOLUTION

Salah Eddine ELMRABET

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

>>>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&

Tom Beck

Did you try my simple suggestion on this post?

Salah Eddine ELMRABET

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

Vontech615

ASKER

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.

Salah Eddine ELMRABET

Hi Vontech615,

I'm giving the right solution, if you don't care let me know so I'll not follow this question!!

Vontech615

ASKER

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.

Vontech615

ASKER

Salah! Sorry auto-corrected on mobile.

Salah Eddine ELMRABET

Good luck

Alicia St Rose

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.

Vontech615

ASKER

Awarding some points to Salah for effort but Tom Beck solved the problem with his suggestions.