How to Align Input Field and Submit Button (Also Differences Between: Ie, Ffox, Chrome)

How do I align input field and submit button (also differences between: IE, FFox, Chrome)?

Here is what works for me in FF, IE8 and Chrome on XP

#subscribe_email {
    border: solid 1px #CCC;
    height: 21px;
    width: 250px;
    font-size: 15px;
    color: #999;
    padding-left: 5px;
    vertical-align: bottom
}

#subscribe_submit {
    border: solid 1px #CCC;
    height: 25px;
    width: 115px;
    color: white;
}

I removed CSS on the #form_box div, set vertical-align:bottom and tweaked the height on text box.

Input text alignment is behaving differently in different browser

You can edit the CSS like this answer:

input.box {  height: 15px;  padding: 5px;  border: 1px solid #999;  width: 145px;  vertical-align: middle;  display: inline-block}

<input path="token" id="token" tabindex="2" maxlength="35" class="box" placeholder="token" />

Input Field appearing different in Chrome and Firefox

There is a difference because Firefox uses box-sizing: content-box on type="search" inputs, while Chrome uses border-box.

.form-wrapper input {
    box-sizing: border-box;
}

http://jsfiddle.net/J8dSN/12/

I face differences on IE and chrome

Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom

Button text position differs from browser

So I found the problem.

I used font-family "Myriad Pro" which was installed with Photoshop. Every browser seems like renders different this font, so after font-family change the problem has gone.

Quite tricky to find but easy solution...

input type=submit text vertical alignment in Firefox

I found this post because I had resolved this problem a few months ago and when I ran into it again today, I couldn't remember what I'd done. Nice. After poring over my css I finally located the "fix". I can't take credit because I found it on the web somewhere, but hopefully it will be as useful to you as it has been for me:

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}

I hope this helps.

HTML Submit Button positioning issue in Internet Explorer 8

i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width.
Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. please copy this code and run your system.

complete codings:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
    <meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
    <link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
    <script src="js/jquery-1.6.4.js"></script>
      <script type="text/javascript" src="js/jquery.validate.js"></script>
      <script>
      $(document).ready(function(){
        $("#form1").validate();
      });
      </script>
    <script type="text/javascript">
        function clearThis(target){
            target.value= "";
        }
        </script>
    <script type="text/javascript">
    function autoGrow (oField) {
      if (oField.scrollHeight > oField.clientHeight) {
        oField.style.height = oField.scrollHeight + "px";
      }
    }
    </script>

    <style>
    /*-- Reset CSS --*/
    .wraper{
            width:70%;
            margin: 0px auto;
            padding:0;
        }

        #field {

        }
        #ftext{
            font-family: 'Capriola', sans-serif;
        }
        #btext{
            font-family: 'Quando', serif;
            font-weight:400;
        }
        #space{
            padding-left:5%;
        }
        .submit{
            padding-left:54%;
            padding-right:60%;
            clear:both;
        }
        #value{
            color:#999;
        }
        textarea {
      resize: none;
    }
    #noscrollbars {
        overflow:hidden;
    }
    #inform{
        color:#C00;
        font-size:12px;
        text-align:justify;
    }
    select{
        color:#00F;
    }
    textarea{
        border-right: #a9a9a9 1px solid;
      border-top: #a9a9a9 1px solid;
      border-left: #a9a9a9 1px solid;
      border-bottom: #a9a9a9 1px solid;
      color:#00F;
    }
    #show1{
        color:#10e684;
        font-size:18px;
        font-weight:600;
    }
    #show2{
        color:#9e2a28;
        font-size:18px;
        font-weight:600;
    }
    #show3{
        color:#9e2a28;
        font-size:10px;
    }
    fieldset{
        width:400px;
        padding-top:5px;
    }
    legend{
        font-family: "Quando", serif;
    }

    .umame
    {

        text-align:right;
        float:left;
        padding-bottom:5px;
        padding-right:8px;
    }
    .umame1
    {

        text-align:left;
        float:left;
        padding:0px;
        margin:0px;
        padding-bottom:5px;
    }

    </style>
    </head>

    <body class="wraper">
    <div>
        <img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;"  />
        <br />
        <br />
        <div class="container">
        <center>
        <br  /><br  /><br  />
        <h2 id="btext">Please perfectly enter the following fields :</h2>
           <form name="login" action="" method="post">
           <fieldset>
           <table width="337" cellpadding="0" cellspacing="0" border="0">
           <tr>
               <td width="169" class="umame">
               <span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
               </td>
                   <td width="156" class="umame1">
                   <input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
                   </td>
           </tr>
           <tr>
               <td class="umame" width="169">
               <span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
               </td>
                    <td width="156" class="umame1">
                   <input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
                   </td>
           </tr>
           <tr>
               <td class="umame" width="169">  </td>
               <td width="156" class="umame1">
               <input type="submit" name="ok" value="Login" />
               </td>
           </tr>
           </table>
           </fieldset>
           </form>
           <table width="337">
           <tr>
                   <td ><span id="inform"><br />
                     * Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link <a href="#">Get Password</a> with your YMOFF Registration ID. </span>
                   </td>
           </tr>
           </table>

          </center>
      </div>
    </div>

    </body>
    </html>