antonkw antonkw - 5 months ago 3x
HTML Question

Different displaying of input inside span in Chrome and FF

I have input inside span and some HTML-code.

<div class="SCnField">
<div class="SCnFieldMarker">

<div class="SCnFieldValue">
<span class="scAttribute selectedSCnNode">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" data-name="true" class="typeahead scn-input tt-hint"
disabled="" autocomplete="off"
style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none;">
<input type="text" data-name="true" class="typeahead scn-input tt-input" autocomplete="off"
spellcheck="true" dir="auto"
style="position: relative; vertical-align: top; background-color: transparent;">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: nowrap;"></pre>
<span class="tt-dropdown-menu"
style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">
<div class="tt-dataset-idtf">

<div class="atrribute-colon">:</div>

Fiddle with styles:

Difference in FF and Chrome display:
FF vs. Chrome

I experimened with vertical-align, display, margins, paddings and so on... But there are no results
How can I fix vertical align in FF?


As per the OP, I am adding this as an answer. You have this code in the CSS, that needs vertical-align: middle:

.twitter-typeahead {
  vertical-align: middle;