comparte el articulo 

Problema en ie7 – ie6 con text-indent en inputs, submit buttons…

Actualizado el 09/10/2013 < > 5 Cometarios

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;
        }

Publicado el 16/08/2010, última actualización 09/10/2013.

Licencia: Eres libre de distribuir este artículo siempre que mantengas los enlaces dentro del mismo intactos y des los créditos al autor.

Autor: Verónica Milán

URL: Cursos de lawebera

Añadir Comentario (Subir al texto)

5 Cometarios

  1. Proyectos Web

    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.

    Martes, 17 de agosto 2010

  2. Dominiocolectivo.com

    Concuerdo contigo Proyecto web, es mejor incluir el boton dentro de un elemento de codigo.

    Domingo, 29 de agosto 2010

  3. diseño web Málaga

    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!

    Jueves, 2 de septiembre 2010

  4. Felix

    Muchísimas gracias, me estaba volviendo loco!

    funciona perfectamente en ie6 y ie7

    gracias
    Felix

    Jueves, 21 de octubre 2010

  5. Héctor

    Gracias por el aporte, me soluciono el cacho…

    Gracias.

    Jueves, 26 de mayo 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras