:: much experimentation here, and hope googlebot hasn't crawled while I'm editing ::
Can you dump MSIE <8? What you need is {display: table} and {display: table-cell}. otoh, support for "font-weight" other than "bold" is pretty iffy. And, heck, Papyrus is a pretty slim font already.
You can't use "justify" because that only applies to
non-final rows of
naturally wrapped text, so by definition it won't work here. And you can't use explicit word spacing because that simply forces one or more menu items to overflow and become invisible. For testing, I gave "a" an explicit background color that was different from the overall background color.
Why do you have "float" in there? Once you've set the width to 100%, it becomes meaningless.
Except in certain narrowly delimited circumstances that I can't think of at the moment. This works in Mozilla, webkit and Opera.
#topnav {
display: table;
width: 100%;
text-align: center;
/* text-align: justify; */
background-color: #01b29d;
font-family: Papyrus, Verdana, "sans-serif";
font-size: 20px;
color: #FFF;
font-style: normal;
padding-top: 7px;
padding-bottom: 4px;
/* float: left; */
/* height: 30px; */
/* text-indent: 40px; */
/* font-weight: lighter; */
/* word-spacing: 100pt; */
}
#topnav a {border: 1px dotted blue; display: table-cell; padding: 2px;}
The blue border is just so you can see what's happening. The bottom padding is an alternative to setting an explicit height. The padding on the individual <a> elements is just to let your users be a little clumsier ;)
Do you need a height in pixels for any reason? For that matter, do you need an explicit font size? Otherwise, say something like 150%. Experiment to see what "reads" right; Papyrus has a very small x-height so you'll need a bigger size. This in fact will be a problem for users without Papyrus, because sans-serif fonts already "read" bigger than almost all serif fonts. Papyrus is technically in the "fantasy" family. (Comic Sans is technically monospace. I am not making this up.)
