Archivo de la etiqueta: IE te odio

CSS: Centrar vertical y horizontalmente un elemento sin saber su tamaño

Centrar un elemento cuando se sabe el tamaño que tiene es fácil. Pero y si el elemento que queremos centrar tiene un tamaño expresado en % o no tiene un tamaño especificado, ya no es tan fácil centrarlo.

Ahora que prácticamente IE8 ya no se usa, lo podemos quitar de la ecuación y usar CSS un poco mas avanzado.
Dicho lo anterior, ahora que podemos usar la propiedad transform: translate();, ya podemos centrar vertical y horizontalmente cualquier elemento.

<div class="centrado-porcentual">
  No nos hace falta conocer el tamaño de esta caja para poder centrarla vertical y horizontalmente :)
</div>

.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

Resultado:

NOTA: si el elemento que quieres centrar está dentro de otro, recuerda que el padre tiene que tener una posición relativa.

Chau!

Idea original: css-tricks.com

Calcular el porcentaje de transparencia para “progid:DXImageTransform.Microsoft.gradient”

En versiones de IE <= 8 es normal tener que usar:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d8ffffff', endColorstr='#d8ffffff');

para aplicar transparencia a un background. Pero como se puede ver, no está muy claro donde poner el porcentaje de transparencia que queremos.

En el ejemplo del principio el truco que estamos usando es aplican un degradado que va desde blanco a blanco, pero por delante de cada color tenemos “d8“, que corresponde al valor alpha de RGBA (AARRGGBB). Pero está en hexadecimal y nosotros estamos acostumbrados a usar valores decimales (tipo opacity: 0.5).

Para saber que valor tenemos que poner si queremos por ejemplo un 50% de opacidad simplemente tenemos que hacer esta cuenta:

255 * 0.5 = 127.5 (redondeando queda en 127).

A este resultado lo pasas por alguna aplicación que convierta valores decimales a hexadecimales como por ejemplo ésta lo que te va a dar “7F“. Y ya está, Nuestro filtro anterior modificado quedaría como:

Blanco al 50%:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7Fffffff', endColorstr='#7Fffffff');

Chau!

IE aplica degradé sobre imagenes transparentes [solución]

Tengo que decirlo: es alucinante los bug que tiene IE (da igual la versión, nunca terminan de solucionarlos).

El ultimo con el que me di es que si usas una imagen transparente para hacer un fondo transparente, se va a ver genial en todos los navegadores menos en Internet Explorer (7 y 8, el 9 no se)

Así es como debería verse:

Y asi es como se ve en IE:

Curioso… bueno googleando un poco di con la respuesta y es básicamente un comportamiento no deseado. Al señor no se le ocurre mejor idea que degradar un fondo transparente que se repita (background-repeat: repeat;) siempre que la imagen sea de 1pxX1px…. raro. Eso me va a enseñar a querer optimizar imagenes

por si no quedó claro, hay que hacer la misma imagen pero con por tamaño “prudente”: 10pxX10px para que IE no crea que tiene que degradar la imagen ¬¬

Solución al box-model en ie7 usando jQuery

Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo…

Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde.
La propiedad CSS “box-sizing” no es la excepción.

Ya sabemos que el siguiente CSS va a arreglar los desfases que se dan cuando un input que esta con un width:100%; dentro de un div que tiene un ancho fijado.

.elemento {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Y como comente en el post anterior, esta propiedad no está soportada en ie7.

Soluciones hay de todo tipo, pero lo cierto es que teniendo jQuery en todos mis desarrollos, se me hiso más que obvia la decisión de usar un script que arregle este bug en lugar de usar cosas más raras (archivos .htc por ejemplo).

Para implementar la solución solo necesitas poner este script:

$(document).ready(function () {
    if ($.browser.msie && ($.browser.version.substr(0, 1) == 7 || $("meta[content='IE=EmulateIE7']").length > 0)) {
        $(".ie7Fix-Box-model").each(function (i, v) {
            var el = $(v);
            //calculamos
            var pL = el.css("paddingLeft").replace("px", "") != "" ? el.css("paddingLeft").replace("px", "") : 0;
            var pR = el.css("paddingRight").replace("px", "") != "" ? el.css("paddingRight").replace("px", "") : 0;
            var bLW = el.css("borderLeftWidth").replace("px", "") != "" ? el.css("borderLeftWidth").replace("px", "") : 0;
            var bRW = el.css("borderRightWidth").replace("px", "") != "" ? el.css("borderRightWidth").replace("px", "") : 0;
            var newSize = el.width() - (parseInt(pL, 10) + parseInt(pR, 10) + parseInt(bLW, 10) + parseInt(bRW, 10));
            //le aplicamos el nuevo tamaño
            el.width(newSize);
        });
    }
});

Y ponerle la class “ie7Fix-Box-model” a todos los input que necesites arreglar.

Ver ejemplo (vean el codigo fuente)

jQuery: .css(“background-position”) falla en Internet Explorer

Me iba a poner a explicar porque falla y todo lo que tuve que hacer hasta darme cuenta del problema y la forma de solucionarlo, pero prefiero por esta vez simplemente dejarles la función que hice para arreglar el problema:

El siguiente método se acopla a jQuery por lo que lo pueden cargar justo después de jQuery y usarlo normalmente.

/**
 * Devuelve un array con la posicion X e Y respectivamente.
 */
$.fn.bgPosition = function() {
    var bgp = "background-position";
    return $.browser.msie ? [parseInt($(this).css(bgp + "-x").split(" ")[0]), parseInt($(this).css(bgp + "-y").split(" ")[0])] : [parseInt($(this).css(bgp).split(" ")[0]), parseInt($(this).css(bgp).split(" ")[1])];
}

Y como mencione, el uso es bastante sencillo.

//Para usarlo:
alert("las posiciónes X e Y del fondo son: " + $("#cajaConFondo").bgPosition()); //muestra [posX, posY]
alert("La posición X del fondo es: " + $("#cajaConFondo").bgPosition()[0]); //muestra posX
alert("La posición Y del fondo es: " + $("#cajaConFondo").bgPosition()[1]); //muestra posY

Para cerrar el post el problema en resumen es que internet explorer no reconoce la propiedad “background-position” del metodo .css(). En su lugar hay que usar “background-position-x” y “background-position-y”

Y una cosita mas: el método solo funciona con pixeles porque es lo que me hacía falta, porcentajes y demases yerbas quedan excluidas salvo que alguien quiera aportar esa parte

Descargar ejemplo

jQuery.height() calcula distintos tamaños entre navegadores [solución]

Este es un tip rápido pero útil.

Escenario:
Tenes un div con el id “elDiv” con el siguiente CSS:

#elDiv {
	border: 1px solid #336699;
	float: right;
	padding: 20px;
	width: 500px;
}

Y en Firefox/Chrome/Safari/Opera al hacer $(“#elDiv”).height(); te entrega 400px por decir algo (el tamaño depende de lo que tenga dentro).
Pero curiosamente en Internet explorer te da un tamaño raro… de menos, unos 358px en nuestro ejemplo.

¿Qué pasa?
Pasa que no le especificaste un modo de renderizado al HTML por medio del DOCTYPE, y por culpa de ello Internet explorer va a renderizar el contenido en modo “Quirks Mode” http://es.wikipedia.org/wiki/Quirks_Mode.

Si no queres leer el articulo de Wikipedia te comento que lo único que tenes que hacer es poner lo siguiente por encima del tag <html>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">

PD: el valor de 358px en mi ejemplo viene de que en modo quirks, IE toma el tamaño del tamaño real menos el padding y el borde: 400 - 40 - 2 = 358.

Algunos CSS no cargan en Internet Explorer

Me rompí un poco la cabeza con este asunto: Hago unas modificaciones que se ven mas que bien en todos los navegadores menos en IE como siempre, y por ello tengo un ie.css puntual para hacer todas las cosas raras que se suelen hacer con CSS para que IE trague.

El problema me lo di con que Internet Explorer 7 (no recuerdo si el 8 también) no reflejaba los cambios de mi CSS destinado a el…. :S

Pero ya se cual es el problema y como no, la solución

El problema es que Internet Explorer por algún misterioso motivo solo carga hasta 31 CSS (los <style> inline también cuentan o_O), y mi CSS especial ya estaba por el puesto 32…

La primera solución que se me ocurrió es activar la compresión de CSS para que se haga uno o dos CSS, pero lo que tiene de malo eso es que si estas maquetando te vas a querer pegar un tiro a la 10º vez que tengas que borrar el cache para ver si el texto que estas maquetando se termina de ver bien en la bass.. Internet Explorer.
Así que fui a darme una vuelta por los módulos de Drupal… Bingo. Hay un modulo que nos salva las papas. Se llama “IE CSS Optimizer”, y lo que hace básicamente es añadir dos opciones más a la compresión de los CSS:

Y lo que hace es algo de lo más simple. Comprime todo el CSS en un archivo pero sin cachearlo.

Con este modulito ya no vas a tener que preocuparte del rarísimo límite de 31 archivos.

Una ultima anotación a todo esto es que andar va a andar bien, pero no vayas a olvidar de poner de nuevo la configuración de la compresión del CSS a “Full optimization” para producción.

El botón de Facebook connect Internet Explorer no aparece (Solución)

Justamente ese fue el problema que tuve hoy. Integré Facebook Connect en una pagina que tengo hecha en Drupal y no había forma de hacer que el botoncito de login se vea en Internet Explorer 7 u 8…

Después de un kilo y medio de I+D descubro que resulta ser que es porque IE no sabe que hacer con los tag <fb>, y dicho problema se soluciona de la forma mas tonta del mundo:
Metiendo el siguiente trozo de código en la etiqueta <html>:

xmlns:fb="http://www.facebook.com/2008/fbml"

Y como nota quiero aclarar que no hace falta reemplazar el atributo existente ya que pueden coexistir ambos:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="es_ES" lang="es_ES">

Y listo. el fukin botoncito ya aparece en IE 7 y 8 (en el 6 ni me gasté en probarlo).

Capy

Drupal, Ubuntu, Performance, Node.js, jQuery, SASS, CSS