input width differs on each browser RSS

• • Reply
  

  Taonias

  Member

  351 Points

  276 Posts

  input width differs on each browser

  Feb 22, 2012 09:50 AM|LINK

  Hello all

  I have this form:

  <style type="text/css">
          #contact_form label
          {
  	        display: block;
  	        height: 16px;
  	        width: 60px;
  	        background-color: #6E6E6E;
  	        float: left;
  	        padding-left: 5px;
  	        font-family: Tahoma, Geneva, sans-serif;
  	        font-size: 70%;
  	        color: White;
          }
  
          #contact_form input {
  	        background-color: #6E6E6E;
  	        border: none;
  	        height: 14px;
  	        display: block;
  	        float: left;
  	        margin-right: 3px;
  	        margin-bottom: 5px;
  	        color: White;
  	        font-family: Tahoma, Geneva, sans-serif;
  	        font-size: 70%;
          }
  
          #contact_form input#name{
  	        width: 220px;
          }
  
          #contact_form input#surname{
  	        width: 402px;
          }
  
          #contact_form input#address{
  	        width: 405px;
          }
  
          #contact_form input#phone{
  	        width: 217px;
          }
  
          #contact_form input#email{
  	        width: 692px;
          }
  
          label#comments_label{
  	        width: 755px;
          }
  
          #contact_form textarea{
  	        background-color: #6E6E6E;
  	        width: 754px;
  	        padding-left: 5px;
  	        height: 102px;
  	        border: none;
  	        resize: none;
  	        color: #fff;
          }
      </style>
  
  
  
      <form id="contact_form" runat="server">
                              <div style="width: 770px; text-align: left;">
                                  <label for="name">Name *</label>
  	                            <input type="text" name="name" id="name" runat="server" />
  	                            <label for="surname">Surname *</label>
  	                            <input type="text" name="surname" id="surname" runat="server"/>
  	                            <label for="address">Address</label>
  	                            <input type="text" name="address" id="address" runat="server" />
  	                            <label for="phone">Phone</label>
  	                            <input type="text" name="phone" id="phone" runat="server" />
  	                            <label for="email">E-mail *</label>
  	                            <input type="text" name="email" id="email" runat="server" />
  	                            <label for="comments" id="comments_label">Comments</label>
  	                            <textarea name="comments" id="comments" style="overflow:auto;" runat="server" ></textarea>
                              </div>
      </form>

  each input has is shown differently (width) on each browser (IE, Mozilla, Chrome) and on mozilla there is a small space between text area and the comments_label

  how can I fix this?

  • Edited by Taonias on Feb 22, 2012 09:50 AM
  • Edited by Taonias on Feb 22, 2012 09:51 AM
• • Reply
  

  Vijay Giggs

  Member

  160 Points

  55 Posts

  Re: input width differs on each browser

  Feb 23, 2012 04:34 AM|LINK

  Hi,

  Please provide this question under CSS section.

• • Reply
  

  Dave Sussman

  All-Star

  37716 Points

  5005 Posts

  ASPInsiders

  MVP

  Re: input width differs on each browser

  Feb 23, 2012 08:20 AM|LINK

  Browsers are free to render things differently, which always makes it difficult for cross browser sites. A CSS reset might be what you need, to reset the base styles for the browser. See http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ for a good description of this problem, and http://meyerweb.com/eric/tools/css/reset/ for the most commonly used reset stylesheet.

  • Marked as answer by Taonias on Feb 23, 2012 09:28 AM