Blog what I write

Juntar identificador y clase en IE6

post - - 2 replies -

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 🙁

  • Si esa es otra de las muchas perrerías que nos hace el IE6, lo que sí puedes jugar es con la doble clase para poder diferenciar un mismo elemento con distinto estado, esto da muchísimo juego.

    Sería

    a.current.home

    y lo soporta perfectamente el ie6

    Un saludo

    • Gracias Queli, aunque en este caso me parece más semántico el empleo del identificador que la doble clase 😉