Centering a specific DIV - Have Tried a LOT - Failing Constantly - css

Question

Good evening guys,
This is my first time on this website, so I apologize if I do this REALLY badly.
First and foremost I have a website designed for use with wordpress, and the issue I'm having is that I want my horizontal navigation at the top to look a certain way, but if I leave it the way it is right now it seems to DROP down to a second row...which makes me sad.
So I have decided that I will just make the individual buttons smaller, and then CENTER them so that even if the viewer doesn't have the fon't I'm using (which is IMPACT), then it will just adjust how they are centered, as opposed to dropping down.
I have tried to find a way to do this for DAYS and I have failed repeatedly. I use "firebug" with firefox to test the code changes, and I just can't find a way to make this work.
The webpage is http://www.crapcast.com and the code is just the top of the page, below the logo. I will include current CSS, which is formatted the way it is to fulfill the current usage of the page (but again, tends to show a double row on some older browsers and on phone browsers).
#navigation {
float:left;
position:relative;
z-index:9999;
}
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
font-size:22px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#navigation li {
float:left;
position:relative;
}
#navigation li a {
float:left;
letter-spacing:2.45px;
padding:15px;
text-decoration:none;
}
#navigation .main_category {
background-position:center top;
background-repeat:no-repeat;
}
#navigation .active {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation li.current-menu-item, #navigation li.current-menu-ancestor, #navigation li.current-post-parent, #navigation li.current-menu-parent {
background-position:0 10px;
background-repeat:no-repeat;
}
#navigation ul li ul {
display:none;
left:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:absolute;
top:50px;
width:230px;
}
#navigation ul li ul li a {
padding:15px 0 15px 36px;
width:194px;
}
#navigation li a.odd {
background-position:18px 23px;
background-repeat:no-repeat;
text-transform:uppercase;
}
#navigation li a.even {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#212121 url(../images/navigation_dot.gif) no-repeat scroll 18px 23px;
}
#navigation li a.odd:hover, #navigation li a.even:hover {
background-position:18px 23px;
background-repeat:no-repeat;

Answer 1

I think your problem is related to your fonts:
#navigation ul {
font-family:Impact,Charcoal,Times New Roman;
...
}
...
...
#navigation li a {
...
letter-spacing:2.45px;
...
}
You are using the width of the fonts to set the width of your items in your menu.
So when there is no Impact font in the system, the items increase their width a lot more.
The width of each character of the Impact font is way to narrow compared to the other ones you put there.
If you try with equivalent width fonts I'm sure you will fix your problem.
In the iPhone, and I guess Android, you cannot find the Impact font there.
Try Helvetica, Arial instead of Impact and change your letter-spacing to 2.0px or something like that.

Answer 2

I don't see the 'two row' problem in any browser, even IE6.
And if want to make sure your visitors gets to view the exact font you're using.. may it be Impact or any sort of fancy fonts. Try using http://www.fontsquirrel.com/fontface/generator.
Just upload your desired font, download the kit & follow the uberly simple instructions (^_^)