Niquelao

Pero, será lista!! 3 de Noviembre de 2006, por Maroto

Pués no estamos muy seguros, algunos por lo menos, otros, como tienen cruzao al probe navegador ya no le dan ni el más mínimo voto de confianza. Nosotros, a pesar de nuestras profundas raíces estandaristas, vamos a dejarle el beneficio de la duda. A medida que nos vayamos explicando os decantareis por una de las dos vertientes.

Últimamente me da por utilizar el plural, como si mi compañero, que no por eso amigo, estuviera de acuerdo con lo que digo. Ese Rumo, ese Rumo, eh, eh!!.

¿Y cual es el problema?

Bien, para empezar tenemos una lista ordenada, los típicos pasos a seguir. Hasta el momento, todo correcto. Pero aprovechándonos de las bondades de CSS queremos ofrecer los elementos de lista de forma horizontal. Una vez llegados a este punto, tenemos varias posibilidades:

dar a los elementos de la lista la propiedad display: inline
flotar los elementos de la lista a un lado, float: left

Ya tenemos los primeros problemas: los marcadores de la lista (números o boliches) desaparecen, siempre con IE y algunas veces con FF.

¿Que dicen las Sagradas Escrituras?

Ya está, el IE que vuelve a fallar!!

Y que dicen las Sagradas Escrituras a todo esto?. El caso es que en el apartado 12.5 de la especificación de CSS 2.1 dice claramente que para la disposición visual de las listas, estos elementos tienen una propiedad tal que: display: list-item que genera una caja de bloque que a su vez contiene un marcador opcional (número o boliche) y el contenido del elemento. Asimismo, todas las propiedades que afectan a los elementos de lista tienen una pequeña restricción: solo se aplican a elementos con display: list-item.

Lo de opcional ya deja muchas puertas abiertas, y más si se trata de ciertas personas.

Con esta parte de las escrituras ya tenemos la solución a uno de los problemas: en cuanto declaramos la propiedad display: inline a los elementos de lista, ya no les afectan las propiedades de estos elementos (tipo, posición, fondo). Repetimos, la especificación es clara: solo para elementos con display: list-item.

En un capítulo anterior de la especificación CSS 2.1, concretamente el capítulo 9, dedicado al modelo de formato visual, tenemos un apartado dedicado a la relación y reacción de los elementos cuando se combinan las propiedades display, position y float (apartado 9.7). Este tema afecta directamente a la representación de los elementos, como vamos a ver.

En líneas generales, nos viene a decir que la mayoría de elementos cuando se les aplica la propiedad float, pasan a tener también display: block, excepto contadas ocasiones, en las que el valor sigue siendo igual que el especificado, es decir, que no cambia. Los elementos que tienen la propiedad display: list-item no deberían cambiar.

Claro que esto es lo que nos dice la especificación de CSS 2.1. La especificación de CSS 2, Recomendación W3C vigente, aunque no la más usada, aplica a todos los elementos flotados la propiedad display: block.

Ahí lo tienen, el que quiera un clavo ardiendo al que sujetarse para defender a IE no tiene más que basarse en esta premisa.

¿Qué puedo hacer para que se vea igual en ambos navegadores?

Una vez más, no hemos encontrado ningún hack para solucionarlo, pero como somos unos tíos con recursos os vamos a dar unas cuantas ideas.

eliminar el marcador en todos los casos: list-style: none
eliminar el marcador en todos los casos y añadir texto que lo sustituya, eso sí, si viene al caso. Utilizar números en una lista ordenada nos causará problemas cuando no tengamos soporte para CSS. Si acompañamos el número con texto siempre daremos una mejor imagen. (Paso 1, Paso 2, etc).
eliminar el marcador en todos los casos y añadir una imagen de fondo mediante la hoja de estilos. Esta solución hará que aumente el marcado en caso de utilizar números, ya que tendremos que declarar una imagen por cada uno de ellos.

Un par de curiosidades …

¿Sabes que si se aplica el valor display: inline al elemento ol nuestro amigo FF inicializa todos los marcadores de lista a 0?

Algo similar le sucede a IE si a los elementos de una lista ordenada se les da un ancho (width). En este caso todos los marcadores se inicializan a 1.

Referencia

Pero, será lista!!

Categoría: Niqueladillo

2 comentarios

Lector anómino 7 de Noviembre de 2006: Creo que hay poco contraste entre el color de fondo y de primer plano de ciertos elementos.
Rumoroso 7 de Noviembre de 2006: Si nos indicas cuáles podremos revisarlo.