Recientemente tuve el problema que después de maquetar correctamente el diseño de una página, haberlo probado en IE8, Firefox, Chrome y Opera, se lo paso a un amigo y este me dice que no puede ver correctamente las animaciones. ¿Cómo puede ser posible si he probado en todos los navegadores del mercado? Después de mucho reflexionar me pregunto de si es debido a que tiene una versión antigua de algún navegador….. y acierto….. era internet explorer 7.
Y ahora bien, ¿cómo puedo emular el comportamiento del IE7 o del IE6 en mi ordenador? Después de buscar mucho por Internet descubro un programa llamado IETester.

Con él, se permite tener abiertos al mismo tiempo sesiones del IE 5.5, IE 6, IE 7 e IE 8, permitiendo comparar las ejecuciones de las páginas, los errores que se provocan,…..

Hoy os presento el código mediante el cual se pueden hacer triángulos únicamente mediante el uso de css. Decir que los triángulos serán rectángulos(como sabréis es cuando uno de los ángulos es de 90 grados).

.flechaizquierda {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}

.flechaderecha {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}

.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}

.flechabot {
border-color:#000000 transparent transparent;
border-style:solid;
border-width:13px 13px 0;
width:0;
}

Hoy toca un post para los que estén empezando en el mundo de la maquetación y desarrollo web.
Si os habéis adentrado en el código de diferentes páginas web (cosa siempre recomendable) os habréis dado cuenta que a veces se utilizan atributos id y en otros casos class de la siguiente forma:

<div id=”nombre”></div>

<div class=”nombre”></div>

Y por ello nos surge la siguiente duda: ¿Qué diferencias hay entre class e id?

• Los id’s se referencian con el prefijo “#” y las clases con “.”.
• Un id debe ser único y una clase puede ser referenciada por muchos elementos.
• Un elemento puede tener 2 o más clases, pero sólo un id.

Notas:

• Referencia de un id #nombreDelID { background: #ff80c0 }
• Referencia de un class .nombreDelClass { background: #ff80c0 }

Es tarde, muy tarde, y en estos momentos estoy sentado en el sofá de mi casa mientras los recuerdos de las últimas horas se agolpan en mi mente….. Pero comenzaré la historia desde el principio, y cómo no, toda buena historia debe empezar presentando a los personajes, que en este caso son las bellezas Firefox e IE y el pobretón de mi. Todo hay que decirlo, yo era el más inexperto e ingenuo, el único que aun no tenía suficiente madurez para saber lo que realmente me convenía en el mundo, y por ello me sucedió lo que me sucedió.

Comenzó el día, mis primeras horas las pasé con la gentil y graciosa Firefox, una maquetación impoluta, sin ñapas ni pifias que no quisiera realmente hacer, fue como un visto y no visto, sin problemas……. incluso ella era capaz de pasarme algún que otro error no muy grave de código….. En definitiva, simplemente sabía que con ella mi mundo iba a ser más feliz.

Pero entonces a media tarde llegó la exigente y envidiosa IE. Ésta comenzó a discutir con Firefox acerca de los estándares, se hizo con mi código y comenzó a destrozar su integridad mientras hacía caso omiso a mis intentos de mantener el orden y el respeto mutuo por el resto de navegadores. Fue la lucha más encarnizada que había visto desde hacía años, ya que ninguna de las dos daba su brazo a torcer y continuaban tirando paneles y moviendo enlaces de aquí para allá.

Entonces tuve que tomar una decisión, que se resume en las siguientes líneas de código:

<link   rel="stylesheet" href="css/cssNormal.css" type="text/css" />
<!--[if IE]><link   rel="stylesheet" href="css/cssParaExplorer.css" mce_href="css/cssParaExplorer.css" type="text/css" /><![endif]-->

Son las 3 de la mañana……. y esta lucha me ha agotado…….. no se si seré capaz de recuperarme de todas las heridas más bien psiquicas sufridas……………