Los que hayáis visitado con anterioridad mi página con IE6, habríais visto que las listas en la columna de navegación no se veían muy bien de digamos. Tanto triangulito, circulito, etc, quedaba realmente feo y agobiante. Los que nunca lo hayáis visto porque utilizáis otro navegador (uno que interprete mejor el CSS), podéis ver aquí una captura de pantalla de lo que pasaba:
Esto no era algo buscado, sino simplemente que no había sido capaz de hacerlo mejor. Mi idea era simple, quería poner una imagen en el titulo de la lista, y que los elementos de la lista aparecieran sin más (ni imagen, ni disco ni nada). Todo ello sin tener que editar el código fuente del WordPress.
Veamos primero que nos genera el WordPress:
<ul>
<li>Aquí va el título de cada sección
<ul>
<li>Enlace</li>
<li>Otro enlace</li>
...
</ul>
</li>
<li>Otra sección más
<ul>
<li>Enlace</li>
<li>Otro enlace</li>
...
</ul>
</li>
</ul>
Como podéis ver, son varias listas desordenadas contenidas todas ellas en una lista desordenada. Si, es un poco lío, pero es lo que hay. 
Lo que yo quería era poner una imagen en los títulos de las secciones, pero dejando la lista desordenada que le seguía sin imagen ni marca. La solución parecía sencilla. Dado que el WordPress asigna una ID por defecto a cada una de las secciones, utilizaría esa ID para darle la imagen, y decir que todos los <li> hijos no tuvieran nada. Vamos a verlo en un ejemplo que será más fácil. Primero el código:
<ul>
<li id="bitacoras">Bitácoras que leo
<ul>
<li>Enlace</li>
<li>Otro enlace</li>
...
</ul>
</li>
</ul>
Y en la hoja de estilos:
#bitacoras {
list-style: disc url("images/triangulo.gif");
}
#bitacoras li {
list-style: none;
}
Lo lógica decía que todos aquellos elementos <li> que descendieran de #bitacoras, no tendrían imagen. Y así era con Firefox, pero no con IE6, que lo mostraba incorrectamente.
Así se quedó durante un tiempo, pero el otro día comencé a darle vueltas para encontrar la solución. Al principio busqué la manera de hacerlo correctamente, pero me fue imposible. Así pues cuando no encuentras el sistema correcto, hay que utilizar un truco. En este caso fue ponerle una imagen a los elementos <li> descendientes de #bitacoras. Obviamente, una imagen transparente de 1×1 píxeles, quedando la nueva hoja de estilos así:
#bitacoras {
list-style: disc url("images/triangulo.gif");
}
#bitacoras li {
list-style: none url("images/espacio.gif");;
}
Y efectivamente, ya se ve correctamente tanto con IE6, como con Firefox. Lo cierto es que no he probado en otros navegadores aún, pero supongo que si va en estos dos, irá en todos. Obviamente lo ideal sería no tener que utilizar este tipo de trucos, así que si alguien sabe como hacerlo sin necesidad de la imagen transparente, que me lo diga que le estaré muy agradecido.
Pero mientras, creo que mi weblog ya es completamente compatible y se visualiza igual con todos los navegadores que tengo a mi mano para probar.