title: CSS Firefox and Chrome different height output
body: <p>I did read other threads having a similar problem, but nothing I read there helped. This is my problem for this website: <a href="http://bit.ly/1gmeHtu" rel="nofollow noreferrer">http://bit.ly/1gmeHtu</a></p>
  
  <p>Look at this picture the blue part with the magnifying glass:</p>
  
  <p><a href="https://i.stack.imgur.com/TSD7F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TSD7F.png" alt="Firefox Browser"></a></p>
  
  <p>In Chrome it looks perfect. However, when I fix that by inserting a height css, then it gets fixed in Firefox, but this happens in Chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/YvnXE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YvnXE.png" alt="enter image description here"></a></p>
  
  <p>So I tried changing font-size for the text there too, but that didn't work either. I tried some padding stuff, didn't work. And now here I am for help.</p>
  
  <p>Here is the code of the search box:</p>
  
  <pre><code>                 &lt;div class="test_line_1"&gt;&lt;?php echo stripslashes(get_option('Pricerr_main_how_it_works_line1')) ?&gt;&lt;/div&gt;
               &lt;div class="test_line_2"&gt;&lt;?php echo stripslashes(get_option('Pricerr_main_how_it_works_line2')) ?&gt;&lt;/div&gt;
               &lt;div class="test_line_3"&gt;
  
                  &lt;form method="get" action="&lt;?php echo get_bloginfo('url') ?&gt;"&gt;
                  &lt;input type="hidden" value="&lt;?php echo get_option('PricerrTheme_advanced_search_id') ?&gt;" name="page_id" /&gt;
                      &lt;input type="text" name="term1" value="" id="big_search_m" placeholder="&lt;?php _e('Search for services here...','PricerrTheme') ?&gt;" /&gt; 
                      &lt;input type="image" src="&lt;?php bloginfo('template_url') ?&gt;/images/search_sel.png" id="search_magnifier" /&gt;
                  &lt;/form&gt;
  
               &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS for all 3 of these elements:</p>
  
  <pre><code>.test_line_3 {
      margin: 40px auto auto;
      height: auto;
      display: inline-block;
      border: 8px solid rgba(10, 10, 10, 0.8);
  }
  
  #big_search_m {
      padding: 12px;
      border: 0px none;
      margin: 0px;
      font-size: 20px;
      width: 400px;
      float: left;
  }
  
  #search_magnifier {
      float: left;
  }
  </code></pre>
  
  <p>How do I fix this?</p>
  
  <p>EDIT: The code of the search box Without the PHP in it:</p>
  
  <pre><code>&lt;div class="test_line_1"&gt;&lt;/div&gt;
               &lt;div class="test_line_2"&gt;&lt;/div&gt;
               &lt;div class="test_line_3"&gt;
  
                  &lt;form method="get"&gt;
                  &lt;input type="hidden" name="page_id" /&gt;
                      &lt;input type="text" name="term1" value="" id="big_search_m" /&gt; 
                      &lt;input type="image" id="search_magnifier" /&gt;
                  &lt;/form&gt;
  
               &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>