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">
        <a href="a.html" class="mnu-hover">Variable Length Text A</a>
    </div>
    <div class="Link">
        <a href="b.html" class="mnu-hover">Variable B</a>
    </div>
    <div class="Link">
        <a href="c.html" class="mnu-hover">Variable Length Text C Really Long</a>
    </div>
    <div class="Link">
        <a href="d.html" class="mnu-hover">Var D</a>
    </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">
        <a href="a.html" class="var_a mnu-hover">Variable Length Text A</a>
    </li>
    <li class="=Link">
        <a href="b.html" class="var_b mnu-hover">Variable B</a>
    </li>
    <li class="=Link">
        <a href="c.html" class="var_c mnu-hover">Variable Length Text C Really Long</a>
    </li>
    <li class="=Link">
        <a href="d.html" class="var_d mnu-hover">Var D</a>
    </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;
}