Firefox Issue - size/width variations?

Hello All! (it's my first post! :) )

The Problem
I'm currently working on a website for a client and I've run into an issue that's really got me scratching my head.
When viewing the site in Chrome or Safari the navigation, which is just a UL with some LI's floated left inside of it, displays perfectly. However, when the site is viewed in Firefox the width of the last LI (controlled by some java to remove some styling) is calculated differently and causes it to become too long to fit inside of the UL.
I've done some research about how firefox applies widths to different elements, however I was unable to find anything that I could apply to my own problem.

The HTML

<div id="navigation">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Community Outreach</a></li>
<li><a href="#">D.A.R.E.</a></li>
<li><a href="#">Recruitment</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Crimestoppers</a></li>
</ul>
</div> <!-- /navigation -->


The CSS

#navigation {
float:left;
width:900px;
height:70px;
background:url(../images/navgradient.png) #004f74;
border-radius:8px 8px 0 0;
}
#navigation ul{
width:900px;
}
/* 1/3 on the border */
#navigation ul li:after{
content:'';
height:70px;
position:absolute;
margin-top:-70px;
margin-left:-21px;
border-left:1px solid #216585;
}
/* 2/3 on the border */
#navigation ul li:before{
content:'';
height:70px;
position:absolute;
margin-left:-20px;
border-left:1px solid #000000;
}
/* 3/3 on the border */
/* Styling of the Navigation items */
#navigation ul li{
padding:0 19px 0 18px;
margin:0 2px 0 0;
float:left;
border-left:1px solid #216585;
}

/* removes borders from first nav */
#navigation ul li:first-child:after, #navigation ul li:first-child:before{
border:none;
}
#navigation ul li:last-child:after{
margin-left:-24px;
}
#navigation ul li:last-child:before{
margin-left:-23px;
}


The Java

$(function() {
// removes styling of the last item in the list
$('#navigation ul li:last').css("padding","0 21px 0 21px");
$('#navigation ul li:last').css("border-left","1px solid #216585");
$('#navigation ul li:last').css("background","none");
$('#navigation ul li:last').css("border-radius","0 8px 0 0");
$('#navigation ul li:last').css("margin","0");
$('#navigation ul li:last:before').css("margin-left","0");
$('#navigation ul li:last:after').css("margin-left","0");

});

Welcome to the forum!

It would be helpful to have either your complete code (and images, if they play a role in page structure) or - better by far - to have a link to a live test page.

You may not have used a doctype declaration. You might not have validated your HTML and a goof up there might be causing trouble. Your javascript could be involved or conflicting with another function. You may not have used a CSS reset and browser-specific style might be messing things up. I could guess and guess - but I'd rather just see what you're actually working with. :D

It would be helpful to have either your complete code (and images, if they play a role in page structure) or - better by far - to have a link to a live test page.

You may not have used a doctype declaration. You might not have validated your HTML and a goof up there might be causing trouble. Your javascript could be involved or conflicting with another function. You may not have used a CSS reset and browser-specific style might be messing things up. I could guess and guess - but I'd rather just see what you're actually working with. :D

Unfortunately we don't have a live-site atm since we're doing some internal server maintenance and updating. :\

But I can tell you the following:
• Doctype has been properly declared as HTML5, which we're running with Modernizr.js for backwards compatibility with older browsers.
• The javascript linked is the only other Java on the whole site other than the Modernizr.js
• We're running a CSS reset to clear out all of the browser defaults and we are not running any browser-specific hacks/styling

This issue has been resolved. I ended up just using a Sprite as a background image instead of dealing with the padding differences between webkit and Gekko