CSS Text position IE/FF issue

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-righ开发者_StackOverflow中文版t: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.

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; 
}

IE can listen to the # tag as example:

#top:5px;  only works in IE,

So try the height of the div to decrease with 5px

#height:21px;

Dont forget to keep the old height for the other browsers:

#height:21px;
height:26px;

Wait i forgot!

If decreating with 5px dont work @ height, try increating it with 5px !

#height:31px;

Would using Conditional Comments solve the problem?

http://en.wikipedia.org/wiki/Conditional_Comments

First of all you should try and reset as many properties as you can. Sometimes there's difference between the default margin/padding/whatever in different browsers.

Try loading a reset.css and see if it still gives the same problem. That way you can start narrowing down where the problem lies.

Personally I'd change this HTML markup to an unordered list and style the LIs using the images.

would be more semantically correct and easier to control.

markup something like:

<ul class="cookiebar">
<li class="first light"><a class="home" href="#">Home</a></li>
<!-- etc-->
</ul>

css for

a.home { 
  background:url(cNavR1.png); 
  display:block; 
  width:100%; 
  height:100%; 
  text-indent:-999em;
}

etc