title: vertical-align and inline-block behaving annoyingly different in chrome and firefox
body: <p>I am currently trying to wrap my brain around a problem, but i can't seem to grasp it. </p>
  
  <p>In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class. </p>
  
  <pre><code>&lt;ul class="list"&gt;
      &lt;li class="list-item"&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
      &lt;li class="list-item"&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
      &lt;li class="list-item"&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
      &lt;li class="list-item"&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;​
  </code></pre>
  
  <p>My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome: </p>
  
  <pre><code>.list-item {
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      margin: 10px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #F3F3F3;
      height:1.5em;
      overflow:hidden;
  }
  
  .list-item:before {
      display: inline-block;
      content: '';
      vertical-align: middle;
      background-color: red;
      width: 5px;
      height: 7px;
      margin: 0 4px 0.125em 5px;
  }
  
  .list-item a {
      display: inline-block;
      overflow: hidden;
      line-height: 1.5;
      height:1.5em;
  }
  </code></pre>
  
  <p>But when you load the page in firefox, the icon is way off at the bottom. <a href="http://jsfiddle.net/pUhPB/4/" rel="nofollow">http://jsfiddle.net/pUhPB/4/</a> </p>
  
  <p>I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work: </p>
  
  <pre><code>.list-item {
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      margin: 10px 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #F3F3F3;
      height:1.5em;
      overflow:hidden;
  }
  
  .list-item:before {
      display: inline-block;
      content: '';
      vertical-align: baseline;
      background-color: red;
      width: 5px;
      height: 7px;
      margin: 0 4px 0 5px;
  }
  
  .list-item a {
      display: inline-block;
      vertical-align:middle;
      overflow: hidden;
      line-height: 1.5;
      height:1.5em;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/L3N3f/" rel="nofollow">http://jsfiddle.net/L3N3f/</a></p>
  
  <p>But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way? </p>
  
  <p>I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this. </p>
  
  <p>thanks</p>