li’s jumping lines

Some browsers render things slightly differently (text size, etc) so if your total width of navigation items is very close to the total width of the navigation, certain browser quirks might cause the navigation to expand a few extra pixels, making the last item not fit correctly.

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.

You should add margin:0; padding:0; to #navigation ul which could free up some space.

If you are comfortable post a live example, it would be easier.

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.

It jumps to the next line for me too. The only way you can be sure it will stay on one line is to reduce the margin in between each item. Right now you have 16px in between each line, but even reducing it to 15px made them all stay on one line.

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