CSS / HTML вертикальное выравнивание ссылок в горизонтальной панели навигации

Question

С учетом следующего кода:

HTML:

<div id="nav_bar">
   <ul>
        <li ><a href="#" class="current">HOME</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">TO DRINK</a></li>
        <li><a href="#">TO EAT</a></li>
        <li><a href="#">LOCATION</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#"><img class="flag"src="images/italy_flag.png" alt="" /></a></li>
        <li><a href="#"><img class="flag"src="images/uk_flag.png" alt="" /></a></li>
        <li><a href="#"><img class="flag"src="images/spain_flag.png" alt="" /></a></li>
        </ul>
</div>

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;
 }

Текстовые ссылки правильно выровнены по вертикали в Safari и Chrome, как и ссылки на изображения, но в Firefox (3.5) текстовые ссылки немного не в своем положении, немного ближе к низу. Зачем?

Answer 1

Похоже, размер изображения немного больше, чем размер текста.Попробуйте увеличить высоту li в CSS.