title: CSS/HTML vertical alignment of links in horizontal navigation bar
body: <p>Given the following code:</p>
  
  <pre><code>HTML:
  
  &lt;div id="nav_bar"&gt;
     &lt;ul&gt;
          &lt;li &gt;&lt;a href="#" class="current"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;GALLERY&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;TO DRINK&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;TO EAT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;LOCATION&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img class="flag"src="images/italy_flag.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img class="flag"src="images/uk_flag.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;img class="flag"src="images/spain_flag.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  
  CSS:
  
   #nav_bar{
   width:745px;
   height:20px;
   background-image:url(../images/bkg_nav_bar_02.png);
   margin:5px auto;
   -moz-border-radius:.3em;
   -webkit-border-radius:.3em;
   }
   #nav_bar ul{
   list-style:none;
   text-align:center;
   }
   #nav_bar a{
   text-decoration:none;
   font-size:.8em;
   margin:0 10px;
   font-weight:bold;
   color:#FFFF33;
   }
   #nav_bar li{
   display:inline;
   margin-bottom:3px;
   }
   .flag{
   position:relative;
   float:right;
   border:none;
   margin-top:4px;
   margin-right:10px;
   }
  </code></pre>
  
  <p>The text links are correctly vertical aligned in Safari and Chrome and so are the image links, but in Firefox (3.5) the text links are slightly out of position, a bit towards the bottom. Why? </p>