html - Different layouts on firefox and chrome -
i'm developing site header has cart button , search bar.
my question in chrome , firefox see different spaces between cart button , search input. chrome version should right layout. suggestions? 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 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>
please include following in css style apply firefox can give margin bottom firefox
@-moz-document url-prefix() { .cart1 { margin-bottom: 5px; }