Cannot properly position second inline-block element in Firefox

Question

Cannot figure out, how to align "Add new item" button as well as "Search" control. It's not ok only in Firefox, in other browsers the button is aligned to the top of outer container (it's a form). Seems like in Firefox this button is aligned to baseline of the text in "Search" control - "Search text". But this information does not help me to resolve the isue, i've tried different approaches.

P.S. Please, do not suggest using float or absolute positioning - I cannot change design of our designer a lot.

CSS:

.localSearchWrapper {
  margin-right: 2em;
  max-width: 20em;
  display: inline-block;
  padding: 0.2em;
  position: relative;
  top: -0.9em;
}

.addNewItem {
  height: 2.8em;
  width: 2.8em;
  border: 3px solid #0E6463;
  background: #FFF url("/Content/images/plus.png") no-repeat scroll center center / 2em auto;
}

HTML:

<form ...>
  <div class="localSearchWrapper">
    <input name="localsearch" placeholder="Search text" id="localSearchField" type="search"></input>
    <input id="localSearchButton" type="button"></input>
  </div>
  <button class="addNewItem" type="button"></button>
  <!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. -->
  <!--[if lte IE 9]>
  <div class="old_ie_wrapper">
  <!--<![endif]-->
  <div style="overflow: hidden;" id="tableContainer" class="listContainer">...</div>    
  <!--[if lte IE 9]>
  </div>
  <!--<![endif]-->
</form>

FIDDLE SOURCE

If you provide working snippet, someone could look at that and help you. — Vladimir Serykh
@VladimirSerykh Well, i cannot answer this question, i'm not so much into those measurement units, i'm only a programmer trying it to look neat in FF, too. OK, i will try to arrange this in jsfiddle. — Alexander

woestijnrog woestijnrog · Accepted Answer · 2015-10-27T14:21:31

You alter the vertical position of your search box so you need to do the same with your button.

Try adding

vertical-align: top;
position: relative;
top: -0.9em;

to your .addNewItem.

A better alternative would be to use a margin on the proper element and not try to adjust every element ad hoc.

Cannot properly position second inline-block element in Firefox

1 Answers