Question

I have this navigation

<div class="cookieBar">
    <div class="light first">
        <a href="#" class="ckLnk">Home</a>
    </div>
    <div class="dark">
        <img src="images/cnavR1.png" class="pointE" /><a href="#9" class="ckLnk">Cars</a>
    </div>
    <div class="light">
        <img src="images/cnavR2.png" class="pointE" /><a href="#11" class="ckLnk">Ferrari</a>
    </div>
    <div class="dark">
        <img src="images/cnavR1.png" class="pointE" /><a href="#18" class="ckLnk">Broken Ones</a>
    </div>
    <div class="light">
        <img src="images/cnavR2.png" class="pointE" /><a href="#23" class="ckLnk">No Windows</a>
    </div>
    <img src="images/cnavR1.png" class="pointE" />
    <div style="clear:both">
    </div>
</div>

With the CSS:

/* Cookie navigation trail */
.cookieBar
{
    background-color: #D8DFE3;
    height: 26px;
    width: 100%;
    margin-bottom: 12px;
}
.light
{
    background-color:#0F6B93;
    height: 26px;
    float:left;
}
.dark
{
    background-color:#0E3B52;
    height: 26px;
    float:left;
}
.first
{
    padding-left: 10px;
}
.ckLnk
{
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial;
    text-decoration: none; 
}
.ckLnk:hover
{
    text-decoration: underline;
}
.pointE
{
    float:left;
    padding-right:10px;
}

I need the anchor link to position a few pixels lower so it’s centered in its box. When I do position:relative;top:5px; it works fine in FF, but in IE it’s quite a few px off. I can’t seem to get it to ever match in both browsers!

Any tips? IE needs to be top:8px; and FF needs to be top:4px; for it to look about right.

Answer 1

Alternately, to align the link in the center you can just use a line-height of the same size as the navbar’s height. In this case:

.ckLnk
{
  line-height: 26px; 
}