Cuando parece que todo marcha bien, Internet Explorer siempre esta ahí para avisarnos que nos falta un poco mas!. Hoy tuve necesidad de insertar un iframe en un sitio de una inmobiliaria de Calexico que estoy haciendo, el cual muestra resultados de la Tasa Actual de Hipoteca de Estados Unidos, pues es algo que me pidieron que incluyera, como se trataba de un simple widget, copie el código que dan en la pagina que me paso el cliente, lo probé en varios navegadores y en todos se miro perfecto, pero en Internet Explorer, me mostró lo siguiente.
Como pueden observar, el cuadro muestra 4 bordes, 2 de ellos en 3D, lo que hace que se mire horrible!. Para solucionar este problema, en Firefox y Opera simplemente agregamos el atributo background-color:transparent; a los un iframe en nuestro archivo style.css (o como le llamen ustedes).
iframe{background-color:transparent;border: 0; overflow: 0;} |
Esto solo funciona en Opera, Firefox, Chrome y Safari, pero en internet explorer, no. Así que tenemos que agregar estas propiedades para que en IE se quiten esos bordes horribles.
<iframe src="URL" frameborder='0' marginwidth='0' marginheight ='0' border="0" scrolling="no"></iframe> |
Ahora si, una ves agregadas las propiedades marginwidth, marginheight y frameborder, el resultado es el siguiente.
- marginwidth = Son los margenes izquierdo y derecho del iframe.
- marginheight = Son los margenes del top y bottom del iframe, o sea, el de arriba y el de abajo.
- frameborder = Con este se activan o desactivan los bordes, 1 y 0 son sus valores.
- scrolling = Con este se activa el scroll del iframe, Yes para activar y No para desactivar.
- border= Determina el ancho del borde en pixeles.
Y asi de facil, una ves mas le hemos pateado el trasero a Internet Explorer por sus reveldias :/.
Groso!! Me salvaste!!
Saludos