Hola foreros, quisiera saber si alguien me puede echar una manito con un problema que creo que es simple, se trata de lo siguiente:
Hice un menu el cuál tiene como borde (en el mismo span del texto) la propiedad:
border-bottom : 10px solid #4FBA00;
Es un borde 'grueso', y bueno, esto anda perfectamente bien en IE (se viene el fin del mundo) y en Firefox entre otros navegadores excluyendo a Chrome, el defecto en este es que el borde crece desde el fondo/final del span hacia arriba, en cambio (en los navegadores que se ve bien) el borde crece desde del fondo/final del span hacia abajo, les dejo una captura de ambas situaciones:
Forma correcta:
Forma defectuosa:
Aquí el fragmento de código HTML relevante:
Código:
<div id="menu"> <!-- menu -->
<div id="links"> <!-- links -->
<span class="menuItem"><a>NOTICIAS</a></span>
<span class="menuItem"><a>PROGRAMA</a></span>
<span><a>LINKS DE INTERES</a></span>
</div> <!-- /links -->
</div> <!-- /menu -->
Aquí sus propiedades CSS:
Código:
#links {
border-bottom: 1px solid #DEDEDE;
padding-bottom: 10px;
}
.menuItem {
margin-right: 20px;
}
#links span {
font-family: 'MyriadAppleSemibold';
border-bottom: 10px solid #4FBA00;
}
Nota: El div#menu no tiene propiedades.
Eso sería, ojalá me puedan ayudar ya que el problema me pilló =/
Saludos y muchas gracias.