Juntar identificador y clase en IE6

post - - 2 replies - share

En un proyecto sobre el que estoy trabajando observo que en el maravilloso mundo de IE6 no aparece bien el estilo para el menú de secciones… Intentare ilustrarlo con un ejemplo resumido.

CSS del menú

#nav li a.home { }
#nav li a#current.home { }

Internet Explorer 6 e inferiores recelan de los selectores combinados, aquellos donde se une un identificador con una clase. Y esto puede se necesario en el caso de tener varios elementos con estilos diferentes.

XHTML del menú

<ul id="nav">
	<li id="active"><a id="current" class="home" href="#">Item one</a></li>
	<li><a class="projects" href="#">Item two</a></li>
	<li><a class="contact" href="#">Item three</a></li>
</ul>

La solución en la descendencia

Tenemos por un lado el elemento lista (padre) con el identificador #active que haría la misma función identificativa que #current y anidado el elemento del enlace (hijo) con su correspondiente clase.

Ejemplo

#nav li#active a.home { }

El caso es que vuelvo a tropezar con este problema habiendo escrito un post sobre lo mismo (Problema combinando selector de ID y clase en IE6) hace relativamente poco tiempo.

¿Por qué el ser humano es el único animal que tropieza dos veces en la misma piedra?

Pues no lo sé, pero lo mio es tropezar y volver a tropezar 🙁

Emular IE8/IE7/IE6, Firefox, Safari, Chrome, Opera

link - - 2 replies - share

Al hilo del anterior post “Virtualización de WinXP + IE6, probando nuestro CSS” me ha llegado un comentario (gracias d2f) con otra herramienta que en su día deje pasar de largo (craso error Javi).

Xenocode nos permite en su web descargarnos un plugin y emular estos navegadores sin más complicaciones.

¿Un problema de usabilidad?

Hace un tiempo visite este sitio web, y me pareció “extraño” empezando por los banners y siguiendo por la estructura y diseño. Luego tras encontrar la web con todos los navegadores hice clic en cada título, por ejemplo “internet explorer 6” y esto me llevaba a la web de Microsoft, un simple enlace. Así que me fui y hasta hoy jejeje 😀

Como explicación creo que se debe a la comodidad de hacer clic en el texto del navegador (un poco más grande) y no en el botón verde que simula el “ON” pensando que sería una imagen y que al ir unidas llevaría al mismo destino.

Me gustaría saber a cuantos les ha pasado lo mismo 🙂   (no creo que sea el único rarito)

Virtualización de WinXP + IE6, probando nuestro CSS

post - - 1 reply - share

Bajo Windows tenemos algunas herramientas para probar nuestras hojas de estilo y el marcado que hemos generado.

Sin embargo, las dos soluciones presentan algunos problemas.

  • El primero de ellos en determinados casos no suele emular muy certeramente.
  • El segundo no soporta Windows vista. Al menos no por ahora…
  • El soporte javascript es bastante pobre, incluso es bastante complejo llegar a probar soluciones del tipo PNGFIX.

Read more

NOIE6 Penalizando a Internet Explorer 6

link - - 5 replies - share

Menudo revuelo se ha montado estos últimos días con el Internet Explorer 6 y la necesidad de no mirar tanto hacia este navegador.

La verdad es que muchos de nosotros “perdemos” una barbaridad de horas evitando problemas e interpretaciones un tanto peculiares que hace IE 6 respecto a los estándares (en concreto CSS).

Por otro lado y si mal no recuerdo, creo haber leído que Jakob Nielsen recomendaba probar versiones de 7 años. Si el Internet Explorer 6 nacio en el 2001, este navegador ya esta muerto!

El caso es que seguimos arrastrando las penurias de IE6. Así como en un tiempo surgió el Web Standards Project para mirar hacia adelante y romper con el pasado (guerra de navegadores), ahora nos toca seguir avanzando.

Y todo este royo para decir que me apunto a la iniciativa NOIE6 propuesta por anieto2k. Una buena forma de avanzar a la fuerza, “respetando” en cierta medida a los usuario. Un día (18/10/09) sin hojas de estilo y con un aviso de actualización para los usuarios de IE6.

Por cierto este tipo de iniciativas no son nada nuevo, se han promovido versiones anteriores en otros países y en otros momentos, así que esto vendría a ser la versión Española 😉

Problema combinando selector de ID y clase en IE6

post - - leave a reply - share

Para entender este problema del Internet Explorer 6 (y versiones anteriores) podemos imaginarnos un menú de navegación como el siguiente:

<ul id="navlist">
	<li><a id="current" class="i1" href="#">Item one</a></li>
	<li><a class="i2" href="#">Item two</a></li>
	<li><a class="i3" href="#">Item three</a></li>
</ul>

Lo correcto (sobre todo en términos semánticos) es indicar el atributo id="current" para el enlace que se corresponda a la página activa.

Acceder a este elemento por CSS y poner el enlace en azul sería fácil usando el selector de id:

#current { color: blue; }

Hasta aquí ningún problema, todo sencillo, pero resulta que queremos actuar de forma diferente en cada elemento activo. Por ejemplo poner un color diferente dependiendo de la página activa.
Para esto podemos apoyarnos en las clases de cada elemento creando un selector que combine el ID #current y cada clase .i1, .i2, i3.

#current.i1 { color: blue; }
#current.i2 { color: pink; }
#current.i3 { color: red; }

Todo funciona perfecto… MENOS EN IE 6! (que no lleva nada bien las combinaciones).

Para solucionar esto llevo años usando una técnica que al mismo tiempo mejora el código XHTML.
Se trata de marcar con un ID el elemento que contiene la sección activa id="active".

<ul id="navlist">
	<li id="active"><a id="current" class="i1" href="#">>Item one</a></li>
	<li><a class="i2" href="#">Item two</a></li>
	<li><a class="i3" href="#">Item three</a></li>
</ul>

Y ahora por CSS en vez de combinar ID y clase en un mismo selector, podemos usar el selector #active y cada clase (cascada):

#active .i1 { color: blue; }
#active .i2 { color: pink; }
#active .i3 { color: red; }

El resultado es válido en todos los navegadores y aportamos más semántica al contenido web.

Margen duplicado en IE6, IE5

post - - 1 reply - share

Se dice que tropezar 2 o 3 veces en la misma piedra es cosa de humanos, en mi caso ya me he tropezado decenas de veces con el problema del margen duplicado en las versiones 5 y 6 de Internet Explorer.

La cuestión es que siempre pierdo tiempo pensando en la razón del problema, luego ya se alumbra la bombilla y me digo… Una vez más Internet Explorer esta metiendo la pata y por obra y gracia me duplica el margen de un elemento en bloque flotado.

Read more