title: HTML Text Fields and Buttons appear bigger than specified
body: <p>I am implementing UI design in one of my own projects, and it looks like I have an issue with CSS, big time.</p>
  
  <p>As far as I know, I have specified styles for Input types : text, buttons in the way CSS accepts:</p>
  
  <pre><code>body input[type=text]{
      border:1px solid #208278;
      height:24px;
      padding-left: 5px;
  }
  body button{
      background-color: #279A8F;
      border:0px;
      color:white;
      height:24px;
  }
  body input[type=password]{
      border:1px solid #208278;
      height:24px;
      padding-left: 5px;
  }
  body input[type=submit], input[type=button]{
      background-color: #279A8F;
      border:0px;
      color:white;
      height:24px;
  }
  </code></pre>
  
  <p>On the login page, the fields appear to be of 24px in height, where as after I log in, I see all the fields are bigger, with height more than 24px. I have no clue.
  One point is after logging in, the fields are present in a container which has some padding, and margins, but I don't see any reason how this would affect the fields. This issue has been driving me crazy nuts, can someone please provide some insight? </p>
  
  <p>The container in which the form fields are placed are below:</p>
  
  <pre><code>#container{
      width:1100px;
      margin: 0 auto;
  }
  #leftbar{
      float:left;
      width:200px;
      font-size:13px;
      background-color:#237971;
      color:white;
      padding:4px;
  }
  #rightbar{
      float:right;
      width:200px;
      font-size: 13px;
      background-color:#237971;
      color:white;
      padding:4px;
  }
  #middlebar{
      padding:5px;
      margin-left:3px;
      margin-right:3px;
      float:left;
      width:660px;
      border:1px solid black;
  }
  </code></pre>
  
  <p>HTML Code of Log in page:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=stylesheet type=text/css href="&lt;?php echo base_url('layout/layout.css');?&gt;" media="all"&gt;
      &lt;title&gt;
          My Page
      &lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=header&gt;
      &amp;nbsp;&amp;nbsp;&amp;nbsp;Welcome
  &lt;/div&gt;
  &lt;?php echo validation_errors(); ?&gt;
  
  
  &lt;?php echo form_open('login/verify'); ?&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td align="right"&gt;&lt;label for="email"&gt;E-Mail:&lt;/label&gt;&lt;/td&gt;
          &lt;td align="left"&gt;&lt;input type="text" name="email" id="email" value="&lt;?=set_value('email')?&gt;"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td align="right"&gt;&lt;label for="password"&gt;Password:&lt;/label&gt;&lt;/td&gt;
          &lt;td align="left"&gt;&lt;input type="password" name="password" id="password"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td align="left"&gt;&lt;input type="submit" name="submit" value="Login"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
   &lt;/form&gt;
  &lt;br/&gt;
  &lt;a href="&lt;?php echo base_url();?&gt;signup/signup"&gt;Sign up&lt;/a&gt; for a new account&lt;br/&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>HTML Code of member's area:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script src="&lt;?php echo base_url('js/jquery-1.9.1.js'); ?&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?&gt;"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?&gt;"&gt;
  
  
  
      &lt;/script&gt;
      &lt;link rel=stylesheet type=text/css href="&lt;?php echo base_url('layout/layout.css');?&gt;"&gt;
      &lt;title&gt;Welcome&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=container&gt;
      &lt;div id=header&gt;
          &amp;nbsp;&amp;nbsp;&amp;nbsp;Members area
      &lt;/div&gt;
  
  
      &lt;div id="leftbar"&gt;
          &lt;div class=content&gt;&lt;a href="&lt;?php echo base_url();?&gt;user/home/logout"&gt;Logout&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div id="rightcontainer"&gt;
          &lt;div id="middlebar"&gt;
              &lt;?php echo validation_errors();?&gt;
              &lt;?php echo form_open_multipart('home/create/validate'); ?&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td align="right"&gt;&lt;label for="fullname"&gt;full Name:&lt;/label&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;input type="text" name="fullname"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
  
  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="submit" name="finish" value="Finish"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  
          &lt;/div&gt;
          &lt;div id="rightbar"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>All the fields in the member's area appear bigger than 24px. :( Please help me!</p>
  
  <p>Thank you very much in advance.</p>