I’m using a Safari hack to fill in a gap on the last menu item, but I cannot seem to get it to work correctly.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.moduletablemainmenu ul.menu li#current.last-child .active {
border-right: 10px solid #bbb;
}
}
Did I miss a step somewhere in the basics of CSS?
Trying to fill a space with padding will be hit and miss, as each browser will calculate font sizes etc differently. Instead, remove that border and set the <a> in the menu to display: block;
See if that helps. 
You have a content block with fixed width and you know exact number of menu items. Why not just set fixed width to them instead of calculating paddings for each of them to fill in the gaps?
If you don’t want to use exact widths then remove the left and right padding from the last list item and unfloat the list but set overflow:hidden.
That will allow the last item just to fill the remaining space automatically (second time this question has been asked in the last few hours :))
Something like :
.sf-menu .last-child {padding:0;float:none;overflow:hidden;zoom:1.0}
.sf-menu .last-child a {padding-left:0;padding-right:0}
a negative right margin on the last one to make sure all browsers ride it up would also help.
I would also suggest on the menu taking an axe to the transparency that makes the text in the dropdowns impossible to read, the giant javascripted animated nonsense that just gets in the way of using the menu, getting rid of the serif text since that’s hard to read on screen and possibly changing the content text into a legible font metric instead of the undersized illegible px you have now. Oh, and the grey on black may as well be invisible too since that’s below accessibility norms.
On the whole, the page is knee deep in issues, from the XML prolog forcing IE into quirks mode, to the overreliance on javascript on pages that shouldn’t need ANY, the dozen or so conflicting stylesheets (specificity must be hell on that layout), the endless pointless nested div’s, inlined presentation in the HTML and complete lack of anything remotely resembling semantic markup.
Here’s a tip, if you have more than 9k of markup before you even open the BODY tag, there is something HORRIBLY and DISASTROUSLY wrong with your code. If your entire site totals 480k in 34 files to deliver 836 bytes of content and only 146k of that consists of images, it’s time to throw the entire codebase in the trash and start over clean. You’ve got 24k of HTML doing 8k’s job. (and I’m being generous because of the forms)
I mean even simple stuff:
<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Email Address</label>
<input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Please enter your email address" id="text_1" name="email" type="text" />
</div>
</div>
What are those DIV even in there FOR?!? What’s with the title attribute on elements that don’t take a title attribute?
… and that’s before we even talk the giant outdated script to try and hide the e-mail – because disabling contact information for people who block scripts is going to go over so well… Much less the noscript text not wrapped in a noscript and again, outdated script declarations.
Nonsensical heading orders, heading tags doing LEGEND’s job, paragraphs around non-paragraph elements, IE conditional comments for entire sheet embeds on a layout so simple it shouldn’t even need browser hacks, static CSS inlined in the markup, static scripting inlined in the markup… hell, I’m stuck trying to figure out why it’s only throwing 6 validation errors.
Oh wait, transitional – so the code is in transition from 1997 to 1998…
Do yourself a favor – throw it away and start over, there’s nothing worth saving there.