Webeame Snippets

Sencillo y práctico

*+HTML elemento { reglas }

La propiedad table-layout nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table { 
  table-layout: fixed; 
} 
 
.auto_table { 
  table-layout: auto; 
}

http://sentidoweb.com/2008/02/19/render-mas-rapido-de-las-tablas-con-css.php

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
 }
 
.clearfix {
		display: inline-block;
 }
 
/* start commented backslash hack */
* html .clearfix {
		height: 1%;
 }
.clearfix {
		display: block;
}
/* close commented backslash hack */

Más info en http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack/

Código css para emular el comportamiento de la propiedad css min-height en aquellos navegadores que no la soportan

#elemento {
     height: auto !important; 
     height: XXXpx; 
     min-height: XXXpx; 
}

// introduce aquí la descripción código necesario para la utilización de una imagen png en IE 6 y su modo de inclusión en el resto de los navegadores

// inserta aquí el código
#contenedor { transparent url(../img/bck_trans.png) repeat scroll left top }
 
/* estilo para IE 6 en una hoja condicional - OJO que la ruta de imagen es diferente */
#contenedor { background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/bck_trans.png');  }

// introduce aquí la descripción

#caja {
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
}

- La especificación CSS3 tiene la propiedad opacity, la cual toma valores entre 0 (invisible) y 1 (opaco). - Los navegadores Mozilla poseen la propiedad -moz-opacity que toma los mismos valores que la propiedad anterior. - Internet explorer posee el filtro opacity que toma valores entre 0 y 100.

Un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7

body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}

Usar !important cuando no queremos dar cierta propiedad a IE6

body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}

Hack exclusivo para IE7

body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important;  /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}

Más en http://granimpetu.com/articulos/hack-css-para-internet-explorer-7/