Ver Mensaje Individual
  #1 (permalink)  
Antiguo 17/01/2012, 06:22
Avatar de science
science
 
Fecha de Ingreso: julio-2011
Mensajes: 42
Antigüedad: 12 años, 10 meses
Puntos: 6
El alto de fondo del texto cambia según el navegador

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.

Última edición por science; 17/01/2012 a las 06:40