Niquelao » Blogarkiv » Men, hun er da snu!!

Nosotros, a pesar de nuestras profundas raíces estandaristas, vamos a concederle el beneficio de la duda. A medida que avancemos en la explicación, os decantaréis 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 cuál 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 mostrar los elementos de la lista en 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 hacia un lado, float: left Ya surgen los primeros problemas: los marcadores de la lista (números o viñetas) desaparecen, siempre en IE y algunas veces en FF. ¿Qué dicen las Sagradas Escrituras? ¡Ya está, IE volviendo a fallar! ¿Y qué dicen las Sagradas Escrituras sobre 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 viñeta) 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 en los elementos de la lista, ya no les afectan las propiedades propias 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 los elementos, cuando se les aplica la propiedad float, pasan a tener también display: block, excepto en 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 agarrarse para defender a IE no tiene más que basarse en esta premisa. ¿Qué puedo hacer para que se vea igual en ambos navegadores?

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Una vez más, no hemos encontrado ningún hack para solucionarlo, pero como somos unos tipos 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… ¿Sabéis 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 Especificación CSS 2.1 Especificación HTML 4.01 Categoría: CSS, (X)HTML —> 2 comentarios Lector anónimo 7 de noviembre de 2006 Creo que hay poco contraste entre el color de fondo y el de primer plano de ciertos elementos.

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Rumoroso 7 de noviembre de 2006 Si nos indicas cuáles podremos revisarlo. Puedes hacer un seguimiento de los comentarios gracias al feed RSS 2.0. También podrías dejar un comentario, o enviar un trackback desde tu sitio.

Artículo anterior: Me paso al lado oscuro Artículo siguiente: Yo también lo he visto… Deja tu comentario Los campos Nombre y Email son obligatorios Añádenos a… Etiquetas que destacamos en general accesibilidad conocimiento CSS estándares fieldset Firefox formato formulario fuentes hidden ie IE 7 información javascript legend lista niquelando obligatorio opera xhtml

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; take a look here if you want the current details.