li’s jumping lines

Thanks…but the problem is that there is a large difference in the font-size on different screens and browsers…I think too much so to be caused by being very close, though thanks for the help.

Maybe with a look at my code someone will see something that I haven’t.

My navigation menu:

<div id="navigation">
    <ul>
     <li<?php if (is_home() || is_single()) { echo " class=\"current\""; } ?>><a href="/">WORK</a></li>
     <li<?php if (is_page_template('webdesign.php')) { echo " class=\"current\""; } ?>><a href="/web-design">WEB DESIGN</a></li>
     <li<?php if (is_page_template('webservices.php')) { echo " class=\"current\""; } ?>><a href="/web-services">WEB SERVICES</a></li>
     <li<?php if (is_page_template('graphicdesign.php')) { echo " class=\"current\""; } ?>><a href="/graphic-design">GRAPHIC DESIGN</a></li>
     <li class="last <?php if (is_page_template('contact.php')) { echo "current"; } ?>"><a href="/contact">CONTACT</a></li>
    </ul>
   </div>

And my CSS:

#navigation   {
 width: 880px;
 margin: 15px 0 15px 0;
}
#navigation ul   {
 list-style: none;
}
#navigation li, #navigation li a  {
 color: #000;
 text-decoration: none;
 display: inline;
 font-size: 1.4em;
 margin-right: 16px;
}
#navigation li.last, #navigation li a.last   {
 margin-right: 0;
}
#navigation li a:hover, #navigation li.current a  {
 border-bottom: 1px solid #FF931E;
}

Again, thank you guys for any help…this is kind of making me pull my hair out.

Hi, thanks again. Here’s a live example: pixelbang.com

On my computer and screen it looks fine in chrome, firefox, and safari. But I’ve see it on different computers and screens and the last li jumps a line, all of the li’s looking like their fonts have become larger for some reason. For example if it’s put through here you can see the problem in IE.

Thanks. IE 7 won’t show the bottom-borders when I reduce the margins, but I can live with that. Thanks again.