Evenly spaced and justified horizontal list menu

Question

I searched and found no solution to spacing out a series of lis for a list style menu. I realized CSS alone can't do it so I added some javascript (jQuery). I didn't want the same widths for each LI, I wanted even padding with no leftover space. If anyone can take this concept and simplify my awful javascript or offer alternatives please do so. See example here: http://www.valweb.com/menuTest/

Answer 1

As CSS alone can do so but old IEs can't, why not use display: table; (and table-cell) as a default (your 2nd example is just great) and use display: inline; zoom: 1; /* display: inline-block for IE */ padding: 0 Npx; for IE<8 with the help of conditional comments?
And maybe JS/jQuery if you really must care about IE6/7 users, only served to them.

PS: you should add a rule for :focus

.mainMenu li a:hover,
.mainMenu li a:focus {
  /* ... */
}

as E. Meyer states in the comments of its reset.css stylesheet: ;-)

/* remember to define focus styles! */
:focus {
  outline: 0;
}