Welcome aboard mroulston, text-based elements within a fixed container are always going to present "special challenges," and it's not just limited to navigations (although that's the most popular place where this problem surfaces.)
Browsers don't always "pay attention" to your absolute sizing, fonts will render differently on different OS's, when the zoom/enlarge text features are used your layout will explode . . . there are as many more problems as there are a variety of ways to approach this.
First is, give yourself ample room. Normally you'd think to just allow the layout to go to 100% width, but with today's uber huge high res monitors, this makes for extremely long lines which create a legibility issue worse than tiny 9px text. So you have to limit the width with max-width (which IE 6 doesn't support . . . another story.) If you can manage to give enough room, break on two lines gracefully, this is the best choice, especially if there is potential for adding more links later, which is almost always the case, especially in a footer.
Second, if it's not a FIXED width, you have to allow for smaller monitors. I intentionally keep my monitors set at 1024 for this reason, and still test against 800 so it doesn't blow up if sized down (they're still out there . . . I saw some working 15" monitors in an office a few weeks back.)
Sometimes neither of those work, you have to have a fixed width. To make it work across all possible browsers, I hate to say it, but a technique I use that is extremely reliable, go with images (css sprites.) You won't lose text link juice, read on.
You have an image with link, hover, active, and even visited states. It's stacked like so:
About Us (link)
About Us (hover)
About Us (Active)
in CSS, you do
#about { width: 100px; background:url(about.gif) top left no repeat; outline:none; }
#about:hover,
#home:hover,
#contact:hover,
#whatever:hover { background-position:0 -35px; }
#about:active,
#home:active,
#contact:active,
#whatever:active { background-position:0 -70px; }
The outline becomes important.
<li><a id="about" href="about-company.html">About Us</a></li>
#about,#home,#contact,#whatever {
display: block;
height: 35px; /* width set by specific selectors */
font-size:2px;
text-indent:-5000px; }
So you still have the text links, they're just off the page. Setting outline to none doesn't reveal the sleight of hand trick. :-)
This allows you to reliably set the width of each anchor, and it won't reflow in a fixed width container - if your math is right. :-)
It may not be the best solution, it has compromises, but advantages. You're only loading one image for mouseovers, and doesn't depend on font rendering to play nicely.
Note: text set to "display:none" for SEO purposes has been known to bring a page down in results. I don't know that this technique will cause the same problem, as far as I can tell, it does not, but this requires verification.
