CSS Text position IE/FF issue

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

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;

Answer 2

Would using Conditional Comments solve the problem?

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

Answer 3

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.

Answer 4

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

Answer 5

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