webkit browsers displacing button

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/refin开发者_开发百科e_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?

Add vertical-align: top to #refine_search_button.

The default vertical-align value is baseline, and adding the span with different font-size adjusts where the baseline is.

If you would also like to vertically center the "Index Results" text, add line-height: 36px to the containing span.

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

Just add a line-height:36px to your #refine_search_button id and that should fix the problem.

Because you use display:inline they are dependent on each other, like images and text on the same line. Instead try using display:block; float:left; on both elements, then they will always float to the top :)

It might even work with display:inline-block;

IMO its better do generel better coding than using line-height etc to fix a dynamic problem (ie. you change font-size and so on)