Internet explorer abarca el 65% en cuanto a uso de navegadores se refiere, incluyendo sus versiones ie6, ie7 e ie8. Para los desarrolladores las versiones de internet explorer nos dan más trabajo porque debemos probar como se vé la web que estamos haciendo en todas ellas, eso además de probar el sitio en otros navegadores como firefox, etc. Gracias a algunas librerias hechas en javascript algunos desarrolladores han encontrado cómo minimizar el tiempo en la compatibilidad de su css para las diferentes versiones de este navegador. Este articulo pretende mostrar las diferencias en el css para ie6, ie7 e ie8.

Selectores y Herencia

Selectores de hijos

Ejemplo

body>p {
color: #fff;
}

Descripción:
Selecciona todos los elementos que son hijos de un determinado elemento padre, en este caso body es el padre, y b es el hijo.
Soporte

IE6: No

IE7: Yes

IE8: Yes

Bugs
En IE7, el selector de hijos no funcionará si hay un comentario HTML entre el padre y el hijo.

Clases agrupadas

Ejemplo

.class1.class2.class3 {
background: #fff;
}

Descripción
Este tipo de clases son usadas cuando el mismo código HTML es declarado en varias clases, como aquí:

Content here.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Selectores de atributos

Ejemplo

a[href] {
color: #0f0;
}

Descripción
Permite seleccionar un elemento sólo si éste tiene un atributo específico. En el ejemplo, todos los tags que contengan el atributo href serán afectados, pero no los tags que no contengan el atributo href.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Selectores de elementos adyacentes

Ejemplo

h1+p {
color: #f00;
}

Descripción
Este selector afecta al contenido adyacente a un determinado elemento, por ejemplo el primer párrafo que viene después del target "< h1 >" tendrá el color asignado, en cambio el segundo párrafo no porque no es adyacente.

heading

Content here.

Content here.

Soporte

IE6: No

IE7: Yes

IE8: Yes

Bugs
En IE7, el selector no funcionará si es que hay un comentario HTML entre los elementos adyacentes.

 

Selectores Generales de elementos

Ejemplo

h1~p {
color: #f00;
}

Descripción
Este selector afecta a todo el contenido que viene después de un determinado elemento, en nuestro ejemplo anterior afectaría a los dos párrafos después de la etiqueta "< h1 >". En cambio si un párrafo está antes de la etiqueta no será modificado.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Pseudo-Clases y Pseudo-Elementos

Selector descendiente después de la Pseudo-Clase ":hover"

Ejemplo

a:hover span {
color: #0f0;
}

Descripción
Un elemento puede ser etiquetado con un selector después de la pseudo-clase a :hover, de manera similar a cómo funciona cualquier selector descendiente. El ejemplo anterior cambiará el color de texto a todo el contenido que venga después de mientras el mouse esté posicionado sobre ese contenido.
Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Pseudo-Clases agrupadas

Ejemplo

a:first-child:hover {
color: #0f0;
}

Descripción
Las Pseudo-clases pueden ser agrupadas para reducir el código css. En el ejemplo todos los anchor tag que sean los primeros hijos de sus padres cambiarán el color del texto al asignado cuando el mouse esté hover. Soporte

IE6: No

IE7: Yes

IE8: Yes

 

":hover" en Elementos sin Anchor

Ejemplo

div:hover {
color: #f00;
}

Descripción
La pseudo-clase :hover puede tener un estado a hover, o rollover, para cualquier elemento, no sólo para los anchor tags.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Pseudo-Clase ":first-child"

Ejemplo

div li:first-child {
background: blue;
}

Descripción
Ésta pseudo-clase afecta a cada elemento que sea el primer hijo de su padre. Soporte

IE6: No

IE7: Yes

IE8: Yes

Bugs
En IE7 no funciona si hay un comentario HTML antes del primer hijo.

Pseudo-clase ":focus"

Ejemplo

a:focus {
border: solid 1px red;
}

Descripción
Afecta a cualquier elemento que tenga la propiedad focus.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Pseudo-elementos ":before" and ":after"

Ejemplo

#area:before {
content: "Este texto está antes del area";
}

#area:after {
content: "Este texto viene después del area";
}

Descripción
Coloca contenido antes o después de un determinado elemento, es usado junto a la propiedad content.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Soporte de propiedades

Dimensions virtuales determinadas por la posición

Ejemplo

#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}

Descripción
Especificando los valores top, right, bottom, y left para un elemento que esté ubicado en una posición absoluta, dará al elemento dimensiones "virtuales" (width y height), aunque estos no hayan sido especificados.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Min-Height y Min-Width

Ejemplo

#box {
min-height: 500px;
min-width: 300px;
}

Descripción
Estas propiedades le dan valores mínimos al ancho y alto de un div, permitiendo que sea mas amplio pero no mas pequeño que los valores mínimos especificados. Pueden ser usados juntos o por separado.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Max-Height y Max-Width

Ejemplo

#box {
max-height: 500px;
max-width: 300px;
}

Descripción
Especifican valores máximos para el ancho y alto, permitiendo que un area sea mas pequeña pero no más amplia que los valores asignados. Pueden ser usados juntos o por separado.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Color de borde transparente

Ejemplo

#box {
border: solid 1px transparent;
}

Descripción
El borde transparente permite que un borde ocupe el mismo espacio que si tuviese un color de borde visible.

Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Elementos con Position: fixed

Ejemplo

#box {
position: fixed;
}

Descripción
Este valor para la propiedad position permite que un elemento esté posicionado de manera absoluta con respecto a su contenedor. Soporte

IE6: No

IE7: Yes

IE8: Yes

 

Fixed-Position Background

Ejemplo

#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}

Descripción
El valor fixed para la propiedad background-attachment hace que un background image se posicione de forma absoluta respecto a su contenedor.

Soporte

IE6: No

IE7: Yes

IE8: Yes

Bugs
IE6 pone el background image de manera incorrecta en relación a su contenedor, pero este valor funciona en ie6 sólo si es usado en el contenedor principal.

 

Propiedad con valor “inherit”

Ejemplo

#box {
display: inherit;
}

Descripción
Aplicar el valor inherit a una propiedad hace que ese elemento herede el mismo valor de esa propiedad asignado a su elemento contenedor.

Soporte

IE6: No

IE7: No

IE8: Yes

Bugs
IE6 e IE7 no soportan el valor inherit excepto cuando es aplicado a las propiedades direction y visibility.

 

Espacio de bordes en celdas de tablas

Ejemplo

table td {
border-spacing: 3px;
}

Descripción
Esta propiedad asigna el espacio entre los bordes de celdas adyacentes de una tabla.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Vista de celdas vacías en una tabla

Ejemplo

table {
empty-cells: show;
}

Descripción
Esta propiedad, sólo se aplica a elementos que tienen la propiedad display con el valor table-cell, permite mostrar las celdas vacías de una tabla con sus respectivos bordes y backgrounds.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Posición Vertical de una tabla

Ejemplo

table {
caption-side: bottom;
}

Descripción
Permite que el contenido de una tabla se muestre en la posición bottom, en vez de la posición top, que es donde se muestra por defecto.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Clipping

Ejemplo

#box {
    clip: rect(20px, 300px, 200px, 100px)
}

Descripción
Esta propiedad hace visible sólo una parte de una determinada area, haciendo el resto “clipped”, o invisible.

Soporte

IE6: No

IE7: No

IE8: Yes

Texto sin contenedor en páginas impresas

Ejemplo

p {
orphans: 4;
}

p {
widows: 4;
}

Descripción
La propiedad orphans especifica el número mínimo de lineas ue se mostrarán en la parte inferior de una página impresa. La propiedad widows especifica el número minimo de lineas que se mostrarán en la parte superior de una página impresa. Soporte

IE6: No

IE7: No

IE8: Yes

 

Saltos de linea dentro de areas

Ejemplo

#box {
page-break-inside: avoid;
}

Descripción
Esta propiedad determina si existirá o no un salto de linea dentro de un determinado elemento. Soporte

IE6: No

IE7: No

IE8: Yes

 

Propiedades Outline

Ejemplo

#box {
outline: solid 1px red;
}

Descripción
outline contiene outline-style, outline-width, y outline-color. Es preferible usar esta propiedad en vez de la propiedad border ya que no afecta el flujo del documento, lo que ayuda a una mejor depuración de posibles errores en el diseño.

Soporte

IE6: No

IE7: No

IE8: Yes

 

Valores alternativos para la propiedad Display

Ejemplo

#box {
display: inline-block;
}

Descripción
La propiedad display generalmente tiene el valor block, inline, o none. Los valores alternativos son:

• inline-block
• inline-table
• list-item
• run-in
• table
• table-caption
• table-cell
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Soporte

IE6: No

IE7: No

IE8: Yes

 

Handling of Collapsible Whitespace

Ejemplo

p {
white-space: pre-line;
}

div {
white-space: pre-wrap;
}

Descripción
El valor pre-line para la propiedad white-space hace que los espacios en blanco de varios elementos se ubiquen en un solo espacio, mientras que se establecen saltos de linea. El valor pre-wrap de la propiedad white-space hace que los espacios en blanco de varios elementos no se ubiquen dentro de un sólo espacio, mientras que se establecen saltos de linea.

Soporte

IE6: No

IE7: No

IE8: Yes

Como conclusión podemos decir que por ahora no hay css que funcione para las 3 versiones de internet explorer, o bien funciona en uno y no en los otros dos, o bien funciona en dos pero no uno.

En los pequeños detalles está el hacer a nuestra web diferente y si podemos personalizar esos detalles mejor aun.
Para reemplazar el favicon.ico de tu site y poner el que tu quieras como hice yo:

Puedes utilizar una herramienta muy simple y util, primero debes crear una imagen de preferencia que sus medidas sean de igual tamaño (ancho y alto iguales) para que el resultado se vea mejor.

Guardas esa imagen en cualquier parte de tu disco duro y luego desde la web haces click en "Examinar" y escoges la imagen que acabas de guardar. Luego click en "Create icon" y se creará el icono que podrás usar en tu web. Ahora ya puedes descargar el icono haciendo click en "Download FavIcon" y listo, ahora sólo debes guardar ese icono en la carpeta donde esté ubicado el favicon.ico que usa tu web por defecto, actualizas tu sitio y ya podrás ver el resultado.

Para mejor resultado es recomendable que la imagen que quieres tener como icono sea de dimensiones no mayores a 200, puedes reducir la imagen en cualquier editor de imagenes.

Joomla es uno de los sistemas de gestión de contenido más usados actualmente, y no es por nada ya que Joomla es una herramienta muy útil para mantener la información de tu site organizada, eso además de tener muchos componentes, plugins, modulos, etc que pueden ser descargados libremente y ser instalados en tu sitio para ayudarte con lo que necesites, por ejemplo si necesitas un chat, foro, red social, carrito de compras y muchas otras cosas más, sencillo, Joomla te lo brinda, no tienes que buscar mucho y su instalación en la mayoría de los casos es muy sencilla.

Yo trabajo con la versión 1.5, ahora 1.5.15 pero acaba de salir Joomla 1.6, en su versión beta...mi opinión? cuando vi el login del administrador dije que bien que hayan modificado esta parte, pero ya cuando entré al panel de control y demas paginas vi que los colores no son muy agradables, claro que en gustos nunca podremos ponernos de acuerdo, lo que sí noté es que no se pueden instalar templates ni componentes, por lo menos a mí no me funcionó, talvez ustedes tengan mas suerte.

Así que en conclusión seguiré trabajando, por ahora, con la versión 1.5.15, pero si quieres bajarte la nueva versión puedes hacerlo desde aqui.

Si eres de los que te gusta experimentar con varios motivos antes de decidirte por alguno aqui hay algunas texturas que pueden servir para la web que estas haciendo. Revisando algunas páginas me he dado cuenta que ahora todos comparten sus recursos ya sean imagenes, iconos, vectores, etc... y es que antes no era lo mismo, siempre encontrabas un link que te llevaba a PayPal, en cambio ahora podemos disfrutar de una gran variedad para escoger y finalmente decidirnos por cual utilizar en nuestro proyecto. Aunque claro, es cierto que las mejores imágenes siguen estando en sitios que aun ponen su marca de agua y cobran por sus imágenes como photolibrary.com pero aun asi podemos encontrar lo que necesitamos si sabemos buscar.

		El tiempo se va en los pequeños detalles a la hora de hacer animaciones, hace poco me tocó buscar sonidos para la animación flash de una granja para un sitio de venta de productos de un programa infantil, eran unos diez sonidos aproximadamente y pensé que encontrarlos sería simple, pero ni tanto, primero que hay muchos sonidos pero tienes que encontrar los adecuados, si no hay los adecuados entonces a buscar los más parecidos y editarlos, y con qué editarlos? si no tienes un programa de edición de audios pues a buscar uno gratis y que sea útil, porque me he encontrado algunos que hacen todo lo que quieres y a la hora de ponerlo en el flash encuentras que el archivo no puede ser leído, tamaña decepción y a volver a buscar otra herramienta.
Si necesitas encontrar sonidos para animaciones o cosas similares puedes buscar en free-loops, hay varias categorías, puedes escucharlos primero y luego descargarlos, un sitio que me ayudó mucho en la búsqueda, cuando hayas escogido el sonido sólo hazle click al icono de descarga no al texto y listo.