IE 7 no interpreta text-indent en botones submit
sábado, noviembre 26, 2011
Publicado por Josue
Si no tienes opcion a font-face y estas trabajando con botones con fondos personalizados en los botones los mas correcto es esconder el texto con la propiedad text-indent y colocar un overflow:hidden, esto es correcto pero cuando lo ves en ie7 no toma la regla css.
La solución es la siguiente:
1) el html
1) el html
<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<input type=”submit” value=”Submit” class=”button”>
</body>
</html>
2) los estilos
input.button{
width:114px;
height:37px;
border: none;
background: transparent url(images/submit_btn.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
font-size: 0;
display:block;
line-height: 0;
}
3) Como funciona?
font-size:0 reduce el tamaño de la fuente a 0, pero incluso despues de hacer esto queda una linea pequeña en el centro del boton.
display:block el text-indent negativo solo funciona en ie si se agrega esta regla.
line-height: 0 Y este es para ie6, aunque pueden desecharlo
Deja deja un comentario, o recibe notificaciones en tu correo.
Suscribirse a:
Enviar comentarios (Atom)

Publicar un comentario