Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Categoría: ‘CSS’

CSS: altura mínima con min-height, incluso en IE6

Fecha de publicación: 2009/12/21

Cuando queremos utilizar una altura mínima para un elemento debemos emplear la propiedad min-height, que establece una altura mínima para dicho elemento. Pero tiene un pequeño inconveniente: no es compatible con Internet Explorer 6.

Para Internet Explorer 6 se puede utilizar la propiedad height ya que la interpreta de la misma forma que los otros navegadores interpretan min-height (incluidas las versiones posteriores de Internet Explorer).

Leer el resto del artículo

Datos del artículo:

CSS: Minimum height with min-height, even in IE6

Fecha de publicación: 2009/12/21

When we use a minimum height for an element we must use the property min-height , which sets a minimum height for that element. But it has one drawback: it is not compatible with Internet Explorer 6.

For Internet Explorer 6 may use the property height interprets it the same way that other browsers interpret min-height (including later versions of Internet Explorer).

Leer el resto del artículo

Datos del artículo:

Internet Explorer 6 y la propiedad ‘bottom’ en CSS

Fecha de publicación: 2009/12/16

Hay un caso en el que la propiedad bottom no es interpretada correctamente en Internet Explorer 6: cuando el elemento con position:relative tiene un overflow:hidden y debajo está el elemento con position:absolute.

Leer el resto del artículo

Datos del artículo:

CSS: Utilización de tipografías incrustadas mediante @font-face

Fecha de publicación: 2009/12/11

Lo primero de todo es advertir que ésta técnica no valida en CSS 2.1, aunque si lo hace en CSS 3.

La llamada desde la CSS a una tipografía ayuda a eludir la necesidad de utilizar imágenes con texto (o Flash) en aquellos casos en los que se quiere utilizar una tipografía que no es de sistema.

Leer el resto del artículo

Datos del artículo:

CSS hacks: filter by selectors

Fecha de publicación: 2009/12/02

All selectors provided here are valid for CSS 2.1 unless otherwise stated.

Internet Explorer 6, Internet Explorer 7 (Non standard mode), Internet Explorer 8 (Non standard mode):

* html {}

Internet Explorer 7, Internet Explorer 8 (IE7 standard mode):

*:first-child+html {}
 * + html/*/ * /**/ body {}

Internet Explorer 8 (Ids are examples):

#ie_80 {} /* IE8 */
 #ie_80, #ie8#fix {} /* other browsers */

It’s not Internet Explorer 6:

html>body {}

It’s not Internet Explorer 6, It’s not Internet Explorer 7:

html>/**/body {}

It’s not Internet Explorer (only valid for CSS3):

:root {}

Safari 3, other Webkit browsers (only valid for CSS3):

body:not(:root:root)

It’s not Internet Explorer, It’s not Opera 9.2x or earlier:

head~body {}

It’s not Internet Explorer, It’s not Opera 9.2x or earlier (only valid for CSS3):

body:only-of-type {}

Opera between 7.2x-9.2x:

html:first-child {}

Datos del artículo:

Accesibilidad: Cuidado con los colores en textos e imágenes de fondo

Fecha de publicación: 2009/10/20

Un problema que se presenta en algunas ocasiones y que suele olvidarse bastante es la utilización de imágenes de fondo CSS en áreas de texto, y cuando se desactivan las imágenes no se ve el texto.

Hoy he visto un ejemplo en la web de Vodafone. En las páginas de productos tienen un enlace con un fondo que simula un botón. El fondo del área de contenido es blanco. El fondo del botón es una imagen de color rojo y el texto de dicho botón es blanco.

Así sale con imágenes:

Vista con imágenes

Así sale con las imágenes desactivadas, no se ve el texto de Ver más de los botones rojos:

Vista sin imágenes

Y aquí se ve en Firebug que es texto dentro de un SPAN a su vez dentro de un A (enlace):

Vista de código en Firebug

Habría bastado con darle al SPAN que contiene el texto un fondo de color rojo para que el texto se siguiese viendo aun con las imágenes desactivadas. Y por cierto, esta web ha sido certificada como doble A (AA).

Datos del artículo:

  • Publicado en categorías: Accesibilidad, CSS, Desarrollo web
  • Comentarios desactivados en Accesibilidad: Cuidado con los colores en textos e imágenes de fondo

CSS: problema de doble margen en IE6

Fecha de publicación: 2009/04/02

Cuando un elemento está flotado dentro de un contenedor y tiene definido un margen, nos podemos encontrar con la desagradable sorpresa de ver como Internet Explorer 6 duplica dicho margen.

Supongamos que tenemos esta regla CSS:

div.capa p.parrafo {float:left; margin-left:10px;}

Internet Explorer 6 sacará un margen de 20px.

Se puede solucionar con un hack CSS, que valida pero es un poco chapuza:

div.capa p.parrafo {float:left; margin-left:10px;}
* html div.capa p.parrafo {margin-left:5px;}

O como dicen en Position is Everything añadir un display:inline; a la regla CSS:

div.capa p.parrafo {display:inline; float:left; margin-left:10px;}

De esta forma el elemento sigue siendo bloque, ya que tiene el float, y sale con el margen definido en Internet Explorer.

Saber más

Datos del artículo:

CSS: propiedades a evitar en dispositivos móviles

Fecha de publicación: 2009/01/19

Algunas propiedades CSS que deben evitarse o utilizarse con cuidado al crear una hoja de estilo para dispositivos móviles:

  • float y display: estas propiedades se utilizan para crear presentar la página en varias columnas, algo que no se va a hacer (y que no se debe), en dispositivos móviles.
  • padding y margin: dependiendo de la función que cumplan habrá que retirarlas o disminuir el área que ocupan.
  • background-image: es recomendable evitar su utilización, y si se mantiene asegurarse que se adapta bien al dispositivo móvil.

Mas en A List Apart: Return of the Mobile stylesheet.

Datos del artículo:

Javascript: deshabilitar scroll vertical de la ventana del navegador

Fecha de publicación: 2008/07/12

Tan sencillo como aplicar la propiedad CSS overflow al elemento html:

document.getElementsByTagName("html")[0].style.overflow = "hidden";
document.getElementsByTagName("html")[0].style.overflow = "auto";

Resulta bastante útil cuando tienen que aparecer ventanas modales.

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: CSS, Desarrollo web
  • Comentarios desactivados en Javascript: deshabilitar scroll vertical de la ventana del navegador

CSS: bug de Internet Explorer 6 y 7 en imágenes de fondo para listas

Fecha de publicación: 2008/03/25

En algunas ocasiones al crear un estilo con imagen de fondo para un elemento HTML destinado a listas (DL, UL, LI, etc.) nos podemos encontrar con que esa imagen no se muestra en Internet Explorer, tanto en la versión 6 como en la 7.

Para solucionar este inconveniente hay un par de apaños:

  • Darle posición relativa a los elementos afectados por el problema (position: relative;).
  • Si el anterior no funciona, darles también anchura (propiedad width).

Visto en The IE/Win Disappearing List-Background Bug (Position is Everything).

Datos del artículo:

Información del sitio