La Cara Oscura
del Desarrollo de Software

A nivel de CSS (Cascading Style Sheet) las opciones para la diagramación del bullet (marcador) de las diferentes entradas (<li>) en una la lista no ordenada (<ul>) son bastantes pobres. Ya no hablemos de que es muy sencillo que estilos aplicados al texto, fuente o alto de la línea tengan como efecto que estos bullets hagan “extraños” en cuanto a donde se ubican en función del despliegue de los diferentes navegadores de internet.

Una solución a este problema es utilizar imágenes de fondo (background images) para los <li>. El proceso consiste básicamente en decirle a la lista que no despliegue un bullet ( list-style-type: none;), especificar una imagen de fondo para los <li> que no se debe repetir y “jugar” con la ubicación del fondo, el padding y margin de la lista, y sus elementos.

De esta forma la listas no-ordenadas en este blog se despliegan prácticamente iguales en: Microsoft Internet Explorer, Mozilla Firefox y Opera, por citar algunos de los principales navegadores disponibles en el mercado.

Pueden abrir este post en cualquiera de estos navegadores, y esta lista de ejemplo se dibujará prácticamente igual:

• Prueba 1
• prueba 2

¿Cómo hacerlo? Es sencillo, las instrucciones paso a paso, con ejemplos muy sencillo están en Listutorial: simple tutorial on CSS based lists. Realmente muy bueno el sitio, les recomiendo que lo visiten.