El alto de fondo del texto cambia según el navegador

[science]

Voy a intentar exponer el problema de un modo senzillo y entenedor.

Estoy haciendo una lista horizontal para maquetar este diseño:



Lo hago con la siguiente estructura HTML:

Código:

<ul class="supnav">
<li class="lisusc">Suscripción:</li>
<li class="lirss"><a href ="#">RSS</a></li>
<li class="liface"><a href="#">Facebook</a></li>
<li class="litwit"><a href="#">Twitter</a></li>
</ul>

El código CSS.

Defino la caja principal:

Código:

ul.supnav{
    width: 940px;
    height: 18px;
    background-color: #ececec;
    padding: 5px;
    overflow: hidden;
}

Como ven, de alto serán 18px + 5px arriba + 5px abajo = 28px

Pongo el divisor principal en los elementos de la lista como background:

Código:

.supnav li{
    float: left;
    font-size: 13px;
    margin-right: 5px;
    background: url(images/supnav-div.gif) repeat-y 100% 0;
}

Como ven, quedará el divisor a la derecha y después de este, un margen de 5px.

Para poner los iconos, defino el background de cada enlace por separado:

Código:

.supnav li.lisusc{
    padding-right: 10px;
    color: #585E66;
}
.supnav li.lirss a{
    background: url(images/rss.gif) no-repeat 0px;
}
.supnav li.liface a{
    background: url(images/facebook.gif) no-repeat 0px;
}
.supnav li.litwit a{
    background: url(images/twitter.gif) no-repeat 0px;
}

Y ya sólo me queda darle los padding en los enlaces:

Código:

.supnav li a{
    padding: 0px 15px 2px 25px;
    color: #585e66;
}

El problema está en que con Firefox, por ejemplo, los iconos quedan 1px por debajo.

Luego hay un problema secundario, y es que los divisores verticales tienen 1px menos. En lugar de 18px hacen 17px.

Ejemplos de como me queda:
- En Firefox, iconos 1px por debajo:


- En Chrome (y también Firefox), divisor con 1px menos de alto:



Creo que el problema podría ser en que el fondo del texto (que es de 13px) está cortando las imágenes de fondo.

¿Hay algún modo de definir el alto de fondo de un texto? No encuentro nada.


Muchas gracias de antemano.

[IsaBelM]

prueba con vertical-align

[science]

Gracias por la respuesta IsaBelM.

Estoy haciéndolo con vertical-align:text-top y otras variantes pero no da resultado. En una ocasión incluso me lo baja 2px. No sé si es que me falta algún otro atributo o es que debo definirle el alto de algún modo en concreto...

[kseso?]

En las listas es mejor aplicar los tamaños, paddings, margin, etc a los /a/ declarándolos de bloque (no tomar como recomendación universal, hay situaciones y situaciones).
Y no olvidar la propiedad line-height.

[science]

¡Exactamente! Muchas gracias kseso?
El display:block me los ha puesto correctamente :)

Ah, y también el line-height:18px (que es el alto total que debe tener) en el .supnav li{}
Todo perfecto.