Outbook

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

Datos de búsqueda

Categoría: ‘CSS’

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:

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:

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:

CSS: miniaturas de imágenes en gestores de contenido

Fecha de publicación: 2008/02/26

En algunos gestores de contenido existen módulos para gestión de galerías de imagen en los que no hay más que subir las imágenes, dar título y descripción y el gestor se encarga del resto, incluyendo el redimensionado de la imagen.

Pero a veces ese redimensionado no es el adecuado. Supongamos que solo se redimensiona por anchura , guuardando la proporcion de la imagen original, y que lo que queremos es, por ejemplo, una imagen con forma de cuadrado de 110×110 px.

En este caso concreto el gestor redimensiona la imagen, pero no la recorta, por lo que o le damos una imagen cuadrada o la miniatura no ocupará todo su espacio.

Hay dos soluciones. La primera y más rápida darle a la imagen las dimensiones por CSS, pero quedará deformada o incluso pixelada.

Y la segunda solución, más adecuada, utilizar la propiedad CSS overflow: hidden; en el contenedor de la imagen y que dicha imagen tenga siempre unas dimensiones superiores a 110px, tanto en altura como en anchura (sin pasarse mucho).

Supongamos que tenemos este código HTML (para dos miniaturas):

<div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
 <div class="e;thumb"e;>
  <a href="#"><img src="imagen1.jpg" /></a>
 </div>
</div>

Se utilizaría el siguiente CSS:

div.thumb {width:110px;height:110px;}
div.thumb a {width:110px;height:110px;display:block;position:relative;overflow:hidden;}
div.thumb a img {display:block;position:absolute;top:0;left:0;}

Atención a las propiedades position: son para que esto funcione en Internet Explorer (versiones 6 y 7).

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: