Question

Given the following code:

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

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?

Answer 1

Sounds like the size of the image is slightly larger than the size of the text.
Try forcing the height of the li in CSS.