Una mas y van…

Atrévete a penetrar en el extraño mundo de Internet Explorer… cuando lo real es imaginario y lo ficticio se convierte en ilusiones… en este caso presentamos el misterioso caso de la imagen que no es imagen (o por lo menos eso dice el motor de renderizado de Internet Explorer).

Si puedes ver la imagen, probablemente estés usando Firefox, Opera o Safari… Si en cambio la imagen te aparece con el clásico cuadradito de “no encontrado” es porque estás usando un navegador poseído por el demonio! OMG

La imagen no está retocada, fue creada con Photoshop CS3 y guardada como JPG sin ningún filtro extra ni nada extraño… claro, decir “nada extraño” es un poco irónico.

Son este tipo de cosas las que a uno le hace dudar sobre si eligió bien su profesión.

Para rematar, una imagen vale mas que mil palabras:

Internet Explorer con un bug. (naaa me estás jodiendo? ¿de verdad?). No se si este fallo esté documentado, porque he buscado en todos lados y no he encontrado algo parecido, asi que si alguien lo encuentra agradecería me lo haga saber.

En este caso es algo muy extraño, que me topé al diseñar la nueva plantilla para el blog. Se trata de un bug que afecta a todas las versiones de Internet Explorer hasta el momento (5, 6 y 7 son las que yo probé).

El bug en cuestión se visualiza cuando usamos la propiedad Background en un a:hover dentro de una lista.

Supongamos el siguiente ejemplo:

<ul id="categories">
      <li class="widget_categories">
        <ul>
          <li><a href="#" title="">Elemento 1</a></li>
          <li><a href="#" title="">Elemento 2</a></li>
          <li><a href="#" title="">Elemento 3</a></li>
          <li><a href="#" title="">Elemento 4</a></li>
          <li><a href="#" title="">Elemento 5</a></li>
          <li><a href="#" title="">Elemento 6</a></li>
        </ul>
      </li>
</ul>

Se trata de una lista dentro de otra lista (algo muy común cuando se diseñan themes para WordPress). El bug empieza con estas lineas de estilos:

a:hover {
    background: #FFFFFF;
}
ul#categories li.widget_categories{
    padding:10px;
}

Puedes ver el ejemplo en acción en el siguiente link:
http://www.coders.me/ejemplos/IE7BugHover/

El problema

Al pasar el mouse sobre el elemento 1 y 2, no pasa nada y todo funciona como esperamos. La sorpresa está en el elemento 3 y siguientes, que provocan el efecto de “achicar el alto” del contenedor. Al pasar el mouse por sobre los elementos 1 y 2 provocamos que se vuelva a “agrandar” este contenedor. El efecto es igual al bug de la guillotina para IE6 (solo que fué arreglado en IE7 y no debería aparecer)
¿Por que siempre es desde el tercer elemento, y no del cuarto o quinto o segundo? Un misterio que nunca sabremos.

La teoría

El background en un enlace es un fallo que afecta al núcleo del propio capitalismo (matrix) haciendo que Internet Explorer detecte esta técnica como algo totalmente “comunista” y por consiguiente liberando pequeños micro-virus que hacen que nuestra pc se comporte de manera extraña aplicando bugs guillotinas donde no los hay. Es el precio que hay que pagar por usar cajas cerradas.
Nota del editor: Lo anterior fue producto de la imaginación del autor de este artículo.

La Solución

Consiste en agregar height:100%; a la lista contenedora. En nuestro ejemplo, se trata de widget_categories.

  ul#categories li.widget_categories{
    padding:10px;
    height:100%; /* IE6 & IE7 BUG*/
  }

Puedes ver la solución funcionando en el siguiente link: Solución IE7 List Hover Bug

Tan tan ahora Internet Explorer se comporta como dios manda.