0

I have a simple login form and it is centered in internet explorer but in Chrome and Firefox it is aligned to the left of the page. What do I need to do to have the form centered in the other 2 browsers.

 <form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
 <td>&nbsp;</td>
 </tr>
 </table>
 </td>
</form>
Steve D
  • 33
  • 1
  • 6

3 Answers3

0

Try to change the form width to 100%. This the example

<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">
Engkus Kusnadi
  • 2,386
  • 2
  • 18
  • 40
0

You should avoid using HTML tables to define the layout of your page. Here's a good overview on why tables should not be used for layout.

You should rely on HTML tag for semantic and CSS to tell the browser how he should display the stuff in the page.

Now consider the following:

<style>
  form  {
    width: 200px;
    margin: 0 auto;
  }

  input {
    display: block;
    margin: 5px 0;
  }
</style>

<form name="form1" method="POST" action="/">
  <h1>Client Login</h1>

  <input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24">
  <input name="mypassword" type="password" id="mypassword" placeholder="password" size="25">
  <input name="Submit" type="submit" class="submit_button" value="Login">
</form>

The HTML is stripped down to the bare essential: your title then your form elements. The form here is the main container. With CSS we tell the form to have 200px width and we use the margin property to center it.

We also tell the input element to display like a block element to fill it'S container, this way they each occupy 1 line.

Learning CSS is useful to separate appearance from meaning, here's a great demonstration of the relation between content, container and design.

Community
  • 1
  • 1
mgadrat
  • 154
  • 1
  • 5
  • I forgot to mention that using CSS will result in better cross-browser compatibility – mgadrat Aug 03 '16 at 03:16
  • Thanks this worked and I will be doing all my forms like this from now on. – Steve D Aug 03 '16 at 04:25
  • If my answer solved your problem, you should upvote it and "acept it". [Here's how](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) ; To quote the post: "Accepting an answer is important as it both rewards posters for solving your problem and informs others that your issue is resolved." – mgadrat Aug 03 '16 at 12:54
0

Would you mind to try this maybe :)

<style>
table  {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>

<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
 <td>&nbsp;</td>
 </tr>
 </table>
 </td>
</form>
Reza Maulana
  • 148
  • 1
  • 1
  • 12