Problema en ie7 – ie6 con text-indent en inputs, submit buttons…
(Sin valoración)
Loading ...Escrito el 16 agosto, 2010 por Verónica Milán
Es frecuente usar imágenes de fondo para dar estilo a los botones de un formulario. Cuando se hace esto, se suele despejar el botón de texto mediante la propiedad text-indent, dando márgenes negativos al texto de forma que deja de ser visible en pantalla.
Dado este botón:
<input type=”submit” value=”Buscar” class=”button” />
Usamos un CSS parecido a este para que se muestre la imagen como botón y se esconda el texto “buscar”, que aparecería por defecto como texto del botón (por encima incluso de la imagen) si no hacemos nada:
input.button {
width:64px;
height:23px;
border: none;
background: transparent url(../images/bsearch.gif) no-repeat center;
overflow: hidden;
text-indent: -9999%;
}
Pues bien, cualquier navegador decente nos devuelve una renderización correcta del código anterior, obteniendo un resultado parecido a este:
Pero para variar,el dichosos Internet Explorer (tanto ie6 como ie7) hace de las suyas y a pesar de las propiedades establecidas, sigue mostrando el texto del botón por encima de la imagen de fondo que hemos establecido como botón.
Para solucionar este error, suelo aplicar una solución que me ha ido genial siempre que la he aplicado, además de ser sencilla y no interferir con el correcto renderizado de Internet Explorer ni del resto de navegadores (no es un hack). Lo que hago es aplicar estas líneas de código al estilo CSS del botón:
font-size: 0; display:block; line-height: 0;
Lo que hacemos es darle un tamaño cero al texto del botón, lo cual funciona perfecto en ie7, pero en ie6 sigue viéndose una línea blanca en lugar del texto, así que le añadimos las otras dos declaraciones para arreglar el bug también en ie6.
Como resultado tenemos el CSS siguiente, que arregla tanto en ie6 como en ie7 el problema con text-indent en los inputs y botones de nuestros formularios:
input.button {
width:64px;
height:23px;
border: none;
background: transparent url(../images/bsearch.gif) no-repeat center;
overflow: hidden;
text-indent: -9999%;
font-size: 0;
display:block;
line-height: 0;
}
|
Artículos Relacionados Crear botones para tu blog con Pixel Button Navegando en busca de herramientas interesantes me encuentro con Pixel Button, una herramienta online gratuita... Crear botones web 2.0 online Volviendo al mismo tema de las webs 2.0 tan de moda últimamente, aquí traigo esta... Diseños web con estilo… espectacular (click para ampliar) The Pixel Blog. Leyendo Smashing Magazine me topé con este diseño, y francamente, me... Esquinas redondeadas con CSS Últimamente estoy investigando bastante por la web en busca de herramientas que puedan ahorrarme trabajo... |
Publicado en CSS | 5 Comentarios
5 Comentarios para “Problema en ie7 – ie6 con text-indent en inputs, submit buttons…”
RSS
Nuestra opinión es que si el Código funciona y resulta validado por el Organismo competente es una opción más dentro de la Programación en CSS.
Ahora bien, se aconseja en los Proyectos Web incluir lo menos posible medidas negativas, ya que el procesamiento de los navegadores Web es tan diferente que suelen haber variaciones entre algunos de ellos a medida que se va incluyendo más Código de contenidos.
Una opción diferente puede ser el incluir el Botón dentro de un Elemento de código . Ello permite poder dejar los márgenes sin valor positivo o negativo.
17/08/10 - 16:59 #
Concuerdo contigo Proyecto web, es mejor incluir el boton dentro de un elemento de codigo.
29/08/10 - 2:31 #
Verónica gracias por el aporte, lo veo útil y mucho son solo 3 lineas de código más y libertad total.
Me lo guardo en Favoritos
¡Gracias por compartir!
2/09/10 - 22:39 #
Muchísimas gracias, me estaba volviendo loco!
funciona perfectamente en ie6 y ie7
gracias
Felix
21/10/10 - 19:03 #
Gracias por el aporte, me soluciono el cacho…
Gracias.
26/05/11 - 21:55 #