Different layouts on firefox and chrome - html

Question

I'm developing a site where the header has cart button and search bar.
fiddle
My question is in chrome and firefox you will see different spaces between cart button and search input. Chrome version should be the right layout. Any suggestions? Help is appreciated.
body {
background: #000000;
}
img[alt="cart-icon"] {
width: 20px;
}
img[alt="telephone-icon"] {
/*width: 18px;*/
margin-top: -4px;
margin-right: 3px;
}
.right {
float: right;
text-align: right;
margin-top: 21px;
}
.tel-no {
color: #fff;
margin-top: -7px;
margin-right: 19px;
font-weight: normal;
text-align: right;
font-size: 15px;
font-family: avenirreg;
}
.tel-no p {
margin-bottom: 0;
display: inline;
}
.cart1 {
float: right;
margin-top: 9px;
margin-right: 7px;
}
.top-cart .truncated {
display: none;
}
.header-search-form {
float: right;
}
.right input[type='text'] {
background-color: rgba(0, 0, 0, 0);
border: 1px solid #7B7672;
border-radius: 0;
width: 125px;
height: 21px;
padding-left: 5px;
margin-right: -19px;
color: #ccc !important;
}
.right input[type='text']:focus {
outline: none;
background-color: #444;
}
.right button[type='submit'] {
position: relative;
border: none;
/* background-size: 19px; */
background-size: 15px;
height: 25px;
width: 25px;
background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
left: -11px;
top: 6px;
}
/* firefox*/
#-moz-document url-prefix() {
.header-row-1 button[type='submit'] {
position: relative;
border: none;
/* background-size: 19px; */
background-size: 15px;
height: 24px;
width: 25px;
background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
left: 0px;
top: -25px;
}
}
.header-row-1 button[type='submit']:hover {
background-color: #ED1B24 !important;
}
.cart-label {
background-color: red;
color: #fff;
/* border-radius: 11px; */
padding: 2px 4px;
font-size: 9px;
position: relative;
top: -9px;
left: -11px;
}
<div class="right">
<div class="tel-no">
<img src="http://www.encorediamond.co.uk/skin/frontend/ecd/default/images/common/telephone-icon.fw.png" alt="telephone-icon">
<p><span>015395 67957</span>
</p>
</div>
<div class="cart1">
<a href="#header-cart" class="toggle-minicart skip-link skip-cart">
<!--<img src="" alt="cart-icon">
<span class="cart-label">5</span>-->
<img src="http://www.encorediamond.co.uk/skin/frontend/ecd/default/images/common/cart-icon.fw.png" alt="cart-icon">
<span class="cart-label">
0 </span>
</a>
</div>
<div class="col-lg-4 col-md-5 col-sm-5 col-xs-12 top-cart" style="display: none">
<div class="header-minicart">
<a href="#header-cart" class="skip-link skip-cart no-count">
<!--<span class="icon"></span>
<span class="label"> ( </span>
<span class="count"> )</span>-->
</a>
<div id="header-cart" class="block block-cart skip-content">
<div id="minicart-error-message" class="minicart-message"></div>
<div id="minicart-success-message" class="minicart-message"></div>
<div class="minicart-wrapper">
<p class="block-subtitle">Recently added item(s) <a class="close skip-link-close" href="#" title="Close">×</a>
</p>
<p class="empty">You have no items in your shopping cart.</p>
</div>
</div>
</div>
</div>
<form id="search_mini_form" action="http://www.encorediamond.co.uk/catalogsearch/result/" method="get">
<div class="header-search-form">
<input kl_virtual_keyboard_secure_input="on" autocomplete="off" id="search" name="q" value="" class="input-text" maxlength="128" type="text">
<button type="submit" title="Search" class="button"></button>
<div style="display: none;" id="search_autocomplete" class="search-autocomplete"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', '');
searchForm.initAutocomplete('http://www.encorediamond.co.uk/catalogsearch/ajax/suggest/', 'search_autocomplete');
//]]>
</script>
</div>
</form>
<!-- <div class="navbar-toggle collapsed mobile-expand" data-toggle="collapse" data-target=".navbar-collapse"></div>--></div>

Answer 1

please include following in your CSS this style will apply only for firefox you can give margin bottom only for firefox
#-moz-document url-prefix() {
.cart1 {
margin-bottom: 5px;
}

Answer 2

you should use (Edited)
#search_mini_form {
float: right;
margin-top: 9px;/*Same as .cart1*/
}
instead of
.header-search-form {
float: right;
}
And replace position:relative with float:right; for .right button[type='submit']:
.right button[type='submit'] {
float:right;
border: none;
/* background-size: 19px; */
background-size: 15px;
height: 25px;
width: 25px;
background: rgba(0, 0, 0, 0) url('../images/ico-search.png') no-repeat center center;
left: -11px;
top: 6px;
}
#search_mini_form is the element containing your input, and it is the sibling element of your .cart1 element. So, if you want to set your layout using float, elements you want to position have to be siblings. That's why I set the floatproperty to the parent element of your input that is a sibling of .cart1
Exemple