css - chrome and IE layout Differences issue -

i having weird layout issues between ie , chrome, can decent on one, not other. moving drop-down menu bars css gets great on chrome, moves 1 of bars way far middle of page in ie. not best @ web programming/layouts, may missing small/simple. attached @ pictures of issue.

ie-prod

chrome-prod

ie-dev(changes)

chrome-dev(changes)

the changes have made far css , here are: ( top dropdown menu)

#searchbar {     margin: 3px 0;     padding: 3px 0;     width: 190px;     clear: left; }  /*translate element*/ #google_translate_element {   color: transparent; } 

to:

 #searchbar { position:relative;     top: 15px;      right: -10px;     margin: 3px 0;     padding: 3px 0;     width: 190px;     /*clear: left;*/ }  /*translate element*/ #google_translate_element {  position: relative;  left: -310px;   color: transparent; } 

the related html/ascx code follows (no changes between prod/dev)(links removed):

<div id="container"> 

<div class="skin-header">  <!-- begin accessibility links -->     <ul class="accesslinks">       <li><a href="#navigation" accesskey="n">go site links</a></li>       <li><a href="#maincontent" accesskey="s">skip page content</a></li>       <li><a href="http://r" accesskey="h">go home page</a> </li>       <li><a href="mailto:email" accesskey="0">email webmaster</a></li>      </ul> <!-- end accessibility links -->    <div class="skin-header_left"> 

<h2>header</h2> <h3 class="motto">building better tomorrow</h3> </div>  <div class="skin-header_right">      <div id="header_icons">     <a href="http://mai" title="check  email"><img      src="/images/ch" alt="staff check  email" /></a>     <a href="http://w"      title=" facebook page" rel="external"><img src="/images/facebook1.png"      alt="facebook page" /></a>     <a href="http://tw" title=" twitter" rel="external"><img      src="/images/twitter1.png" alt=" tweets" /></a>     <a href="http://www.youtube.com" title=" on youtube" rel="external">         <img src="/images/youtube1.png" alt=" youtube" /></a>     <a href="http://r" title=" news rss feed"      rel="external"><img src="/images/rss1.png" alt=" rss feed"/></a>     </div>   <div id="searchbar">     <dnn:search runat="server" id="dnnsearch" cssclass="search"     usedropdownlist="true" submit="<img src=&quot;images/search.gif&quot;     border=&quot;0&quot; alt=&quot;search&quot; /&gt;" /> </div>  <!-- google tranlation widget code march 23, 2015 -->     <div id="google_translate_element"></div><script type="text/javascript"> function googletranslateelementinit() {   new google.translate.translateelement({pagelanguage: 'en'},     'google_translate_element'); } </script><script type="text/javascript"     src="//translate.google.com/translate_a/element.js?     cb=googletranslateelementinit"></script>  <!-- google tranlation widget code march 23, 2015 -->   </div> 

turns out using syntax placing google translator works better layout in both, no css changes needed @ all.

 <!-- google tranlation widget code march 23, 2015 -->     <div  style="display:block;clear:both;"><div id="google_translate_element">    </div><script type="text/javascript"> function googletranslateelementinit() {   new google.translate.translateelement({pagelanguage: 'en'},     'google_translate_element'); } </script><script type="text/javascript"     src="//translate.google.com/translate_a/element.js?    cb=googletranslateelementinit"></script>  </div>  <!-- google tranlation widget code march 23, 2015 -->