Aligning Font-Width across 3 Major Browsers - html

Question

I currently have 4 Divs, each of which contains a hyperlink. Each hyperlink is a member of the navigation bar at the top of a website. The rightmost link must line up with elements below it. I should be able take a vertical line ruler and see the rightmost elements align at the right-most edge of the page.
My rendered HTML looks great in Chrome, but not in FireFox, or IE: the links are not as wide and the page looks weird because the fourth link doesn't hit the right edge of the page.
I believe this has to do with font width definitions, however I do not know what to manually set.
FireFox CSS Computed Text:
font-family Lucida Sans Unicode
font-size 16px
font-weight 600
font-style normal
font-size-adjust none
color #EEFFFF
text-transform none
text-decoration none
letter-spacing normal
word-spacing 0
line-height 23px
text-align start
vertical-align baseline
direction ltr
-moz-tab-size 8
-moz-font-feature-settings normal
-moz-font-language-override normal
-moz-text-blink none
-moz-text-decoration-color #EEFFFF
-moz-text-decoration-line none
-moz-text-decoration-style solid
text-overflow clip
Chrome Computed Style:
background-attachment: scroll;
background-clip: border-box;
background-color: #D00;
background-image: none;
background-origin: padding-box;
border-bottom-color: #B00;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #B00;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #B00;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #B00;
border-top-style: solid;
border-top-width: 1px;
color: white;
cursor: auto;
display: inline;
float: none;
font-family: 'Lucida Sans Unicode';
font-size: 16px;
font-weight: 600;
height: auto;
line-height: 23px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 17px;
padding-left: 10px;
padding-right: 10px;
padding-top: 17px;
text-decoration: none;
width: auto;
---Append---
<div id="LinkContainer">
<div class="Link">
Variable Length Text A
</div>
<div class="Link">
Variable B
</div>
<div class="Link">
Variable Length Text C Really Long
</div>
<div class="Link">
Var D
</div>
</div>
#LinkContainer
{
position:absolute;
float: left;
margin-top:165px;
margin-bottom:5px;
margin-left:225px;
width:680px;
}
.Link
{
float:left;
margin: 0px 1px 0px 1px;
padding: 00px 0px 20px 0px;
color: #EFF;
font-weight:600;
font-family:Lucida Sans Unicode;
font-size: 16px;
}
.mnu-hover
{
background: #C00;
text-decoration: none; /* color: #FFF; */;
border: solid 1px #B00;
padding: 15px 10px 15px 10px;
margin: 0 0 0 0;
color: #EEE;
}
.mnu-hover:hover
{
background: #D00;
border: solid 1px #B00;
padding: 17px 10px 17px 10px;
color: #FFF;
}

Answer 1

This isn't something you can fix. If the text has to look perfect in every browser on every OS, use an image.
<ul id="LinkContainer">
<li class="=Link">
Variable Length Text A
</li>
<li class="=Link">
Variable B
</li>
<li class="=Link">
Variable Length Text C Really Long
</li>
<li class="=Link">
Var D
</li>
</ul>
.Link a {
background-image:url(title_sprite.png);
background-repeat:no-repeat;
height:40px;
text-indent:-999em;
}
.Link a.var_a {
background-repeat:no-repeat;
background-position:0 0;
width:200px;
}
.Link a.var_b {
background-repeat:no-repeat;
background-position:0 -45px;
width:150px;
}
.Link a.var_c {
background-repeat:no-repeat;
background-position:0 -90px;
width:75px;
}
.Link a.var_d {
background-repeat:no-repeat;
background-position:0 -135px;
width:90px;
}