CSS Position du texte numéro IE/FF

Question

J'ai cette 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> 

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

J'ai besoin le lien d'ancrage pour positionner quelques pixels plus bas il est centré dans sa boîte. Quand je fais position:relative;top:5px; ça fonctionne très bien en FF, mais dans IE c'est un peu moins de px. Je n'arrive pas à l'obtenir dans les deux navigateurs!

Des conseils? IE doit être top: 8px; et FF doit être top: 4px; pour qu'il regarde à droite.

Answer 1

Alternativement, pour aligner le lien dans le centre, vous pouvez simplement utiliser un line-height de la même taille que la la hauteur de navbar. Dans ce cas:

.ckLnk 
{ 
    line-height: 26px; 
} 

Answer 2

IE peut écouter la balise # comme exemple:

#top:5px; only works in IE, 

Donc, essayez la hauteur de la div à diminuer avec 5px

#height:21px; 

Ne pas oublier de garder la vieille hauteur pour les autres navigateurs :

#height:21px; 
height:26px; 

Attendez j'ai oublié!

Si la réduction avec 5px ne fonctionne pas @ hauteur, essayez de l'incruster avec 5px!

#height:31px; 

Answer 3

L'utilisation de commentaires conditionnels permettrait-elle de résoudre le problème?

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

Answer 4

Tout d'abord, vous devriez essayer de réinitialiser autant de propriétés que vous pouvez. Parfois, il y a une différence entre la marge par défaut/padding/quoi que ce soit dans les différents navigateurs. Essayez de charger un reset.css et vérifiez si le problème persiste. De cette façon, vous pouvez commencer à réduire où le problème réside.

Answer 5

Personnellement, je changerais ce balisage HTML en une liste non ordonnée et styliserais les LI en utilisant les images.

serait plus sémantiquement correct et plus facile à contrôler.

balisage quelque chose comme:

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

css pour

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

etc