Simple Browser Compatability Problems

I feel like this should be a simple fix but I can’t seem to nail it.

I’m having some trouble getting similar results between browsers. The annoying thing is that this is between Safari and Firefox both on Mac OS. I haven’t even dealt with IE yet…

Here is what I see in Firefox on my Mac OS.

[url]http://benkuyper.com/files/images/my_comp.jpg[/url]

The grey bar shows the maximum width of website I am working in. I’d like to get the navigation bars to extend the entire width of the website and for now I am just adjusting the padding on the left and right to get it as large as possible.

This is what my client sees on Safari and Mac OS X.

[url]http://benkuyper.com/files/images/Client_comp.jpg[/url]

Here is the CS:

[CODE]body,
p {font-family:Helvetica, Arial,sans-serif;}
p {color:#666666;}
p {line-height: 1.2em;}
a:link {color:#fff;} /* unvisited link */
a:visited {color:#000000;} /* visited link */
a:hover {color:#8bc6f0;} /* mouse over link */
a:active {color:#fff;} /* selected link */
a {text-decoration:none}

/***************NAVIGATION********************/

ul {
font-family: Helvetica, Arial,sans-serif;
font-size: 13.5px;
margin: auto 0;
padding: 0;
list-style: none;
font-weight: 700;
}

ul li {
display: block;
position: relative;
float: left;
}

li ul { display: none; }

#mainli:hover {
color: #2d6fa3;
}

ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2d6fa3;
margin-left: 1px;
white-space: nowrap;
}

ul li a:hover { background: #7cb1d7; }

li:hover ul {
display: block;
position: absolute;
}

li:hover li {
float: none;
font-size: 13.5px;
font-weight: 400;
}

li:hover a { background: #7cb1d7; }
li:hover li a:hover { background: #2d6fa3; }
[/CODE]

Any help would be greatly appreciated! The two problems are the varying width of the navbar (the last item drops down to the second line which I do not want) and the text color change. Thanks in advance!

Also in #HTML _↴