title: CSS: navbar sizing IE, chrome
body: <p>I have noticed difference between chrome, IE and mozilla. I am trying to make my navigation bar look the same (fit in one line), but it does not work in IE and mozilla.</p>
  
  <p>This is how it looks on mozilla and IE: <a href="http://puu.sh/o8zxM/d44055d82c.png" rel="nofollow">http://puu.sh/o8zxM/d44055d82c.png</a>
  This is how it looks on Chrome: <a href="http://puu.sh/o8zBw/a06f0437d1.png" rel="nofollow">http://puu.sh/o8zBw/a06f0437d1.png</a></p>
  
  <p>CSS code for it:</p>
  
  <pre><code>#nav3 {
  margin-top: 12px;
  background-color: #F4F4F4;
  overflow: hidden;
  font-size: 14px;
  }
  
  #nav3 ul {
  width: 100%;
  margin: 0;
  padding: 0;
  display: table;
  letter-spacing: -1em;
  }
  
  #nav3 ul .li3 {
  display: inline-table;
  list-style-type: none;
  letter-spacing: normal;
  }
  
  .li3 a {
  display: block;
  text-decoration: none;
  padding-top: 44px;
  padding-bottom: 44px;
  color: #000;
  border: black solid 1px;
  }
  
  #beds {
  padding-left: 40px;
  padding-right: 40px;
  }
  
  #chairs {
  padding-left: 45px;
  padding-right: 45px;
  }
  
  #desks {
  padding-left: 38px;
  padding-right: 38px;
  }
  
  #mirrors {
  padding-left: 32px;
  padding-right: 32px;
  }
  
  #book {
  padding-left: 11px;
  padding-right: 11px;
  }
  
  #tables {
  padding-left: 52px;
  padding-right: 52px;
  }
  
  #dress {
  padding-left: 13px;
  padding-right: 23px;
  }
  
  #storage {
  padding-left: 40px;
  padding-right: 32px;
  }
  </code></pre>
  
  <p>Also I know that it is not the best case when I id every single element in navbar, but I could not find any solution so they stand in those exact positions.</p>
  
  <p>I hope I was clear with my problem. </p>