title: Pixel precise positioning and different browsers
body: <p>I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="navigation"&gt;
      &lt;div id="nav-holder"&gt;
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS is as follows:</p>
  
  <pre class="lang-css prettyprint-override"><code>#navigation
  {
      display: table; 
      height: 35px; 
      width: 100%;
      #position: relative; 
      overflow: hidden;
      background: Black;
  }
  
  #nav-holder
  {
      #position: absolute; 
      #top: 50%;
      display: table-cell; 
      vertical-align: middle;
  }
  
  #navigation ul
  {
      #position: relative; 
      #top: -50%; 
  }
  
  #navigation ul li
  {
      float: left;
  }
  
  #navigation ul li a
  {
      padding: 5px 10px;
      margin-left: 2px;
      background-color: Red;
  
      text-decoration: none;
      font-family: Verdana;
      color: White;
  }
  </code></pre>
  
  <p>I want the menu to have a 2px margin around all of the link elements.
  The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:
  <img src="https://i.stack.imgur.com/GV1QK.jpg" alt="Crossbrowser issue"></p>
  
  <p>The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.</p>
  
  <p>I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.</p>