title: Chrome VS Firefox 1 px different in link
body: <p>Hello everyone how can I fix one pixel difference with Chrome and Firefox? My menu links seem in Chrome correctly but in Firefox my menu links are 1 px smaller than Chrome</p>
  
  <p>Here is CSS:</p>
  
  <pre><code>ul#menu {
      padding: 0 0 2px;
      position: relative;
      margin: 0;
      margin-top:-3px;
      margin-left:7px;
      float:left;
      height:34px;
      display: inline-block; 
  }
  
  ul#menu li {
      text-align: center;
      display: inline;
      list-style: none;
      font-family: 'Museo300Regular';
      font-size:15px;
      font-style:normal;
      line-height: 1;
  }
  
  ul#menu li a {
      background-image:url(../../images2/images/menu_bg_normal.jpg); 
      background-repeat: repeat;
      padding:5px 23px 6px 23px; /*üst sol alt sağ */
      font-weight: normal;
      text-decoration: none;
      line-height: 2.8em;
      background-color: #e8eef4;
      color: #FEFEFF;
      cursor:pointer; 
  }
  
  .deneme 
  {
      width:964px;
      margin-left:auto;
      margin-right:auto;
  }
  </code></pre>
  
  <p>Here is the Html Part:</p>
  
  <pre><code>&lt;div class="deneme"&gt;
      &lt;ul id="menu"&gt;         
       &lt;li&gt;&lt;a&gt;Başkan&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;Meclis&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;Enc&amp;#252;men&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;Kurumsal&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;Maltepe&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;Etkinlikler&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;İhaleler&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a&gt;E-Belediye&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a id="link"&gt;Linkler&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>