title: Misterious margin appearing in ul list
body: <p>to me this is really weird, i have this menu:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              div.menu{text-align:right;}
              div.menu ul{
                  list-style:none;
                  display:inline;
              }
              div.menu li{
                  position:relative;
                  display:inline;
                  background:#434343;
                  padding:8px 12px;
                  line-height: 32px;
                  margin:0;
                  border-left:1px #000 solid;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  &lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt; &lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;Hi&lt;/li&gt;
          &lt;li&gt;Hello &lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>i'm using the latest chrome and firefox 3.6 for testing</p>
  
  <p>there are 6 li but only 5 are shown, a space inside the li causes it not to be rendered
  if there's a text inside it causes a 4px space</p>
  
  <p>"hi" has a space after, "hello " doesn't</p>
  
  <p>adding anchors inside the li causes the same behaviour</p>
  
  <pre><code>   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>has a space after</p>
  
  <pre><code>   &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt; &lt;/li&gt;
  </code></pre>
  
  <p>doesn't</p>
  
  <p>adding 
         div.menu li a:after{content:" ";}
  in the code would solve the problem apparently but if you look closely the elements will appear wider except the last one</p>
  
  <p>any help?</p>
  
  <p>thank you</p>