Question

So I have a 36px tall div with a form (#refine_search) in it. The form only contains a 35px tall button (#refine_search_button). All is well until I add a span after the form with a font-size over 17px. At that point the button will be displayed 2 or 3 pixels down from the top of the div.

You can see it in action here:
http://nolasatellitegovernment.tulane.edu/search.php

CSS:

 #bluenav {
    width:1124px;
    height:36px;
    position:relative;
    background:url(/g/internal_page_blue_nav_bg.jpg) repeat-x #afdeff;
 }

  #refine_search {
      display:inline;
      padding:0 0 0 110px;  
      margin:0;
    }

    #refine_search_button {
      width:92px;
      height:35px;
      background:url(/g/refine_search_button.jpg) no-repeat;
      border:0;
      padding:0;
      margin:0;
    }

    #refine_search_button:hover {
      background:url(/g/refine_search_button_over.jpg) no-repeat;
    }

    .big_heading {
      font-size:22px;
      font-weight:bold;
    }

And the code looks like

<div id="bluenav"><form action="refine_search.php" id="refine_search"><input type="submit" id="refine_search_button" name="submit" value="" /></form><span style="padding:0 10px 0 20px; font-size:22px">
</div>

Does anyone know why 18px text would displace the preceding button in a 35px tall container?

Answer 1

#refine_search {
  display:block;
  float: left;
  padding:0 0 0 110px;  
  margin:0;
}