document.body.clientWidth Por que no es exacto el valor po 8 px en IE6

Remsankar · #1 (**permalink**) 14/06/2008, 12:37

document.body.clientWidth Por que no es exacto el valor por 8 px en IE6

Hola,

He estado buscando en internet pero no encuentro una solución, aunque he leído del problema hace algun tiempo atras.

Tengo un modulo integrado a una aplicación mas grande que reconoce el tamaño máximo disponible del espacio disponible para mostrar una web en uno de estos navegadores IE6 IE7 y FF escogiendo el tamaño ad-hok para mostrar.

He estado testeando con este sitio de pruebas, el problema es que ya tengo todo integrado y encontré este problema al final.

En IE6 con la pantalla a resolución 1200 1024 funciona perfecto abre una versión "modo 1024" que calza perfecto al tamaño de la ventana

Pero en IE6 con la pantalla a resolución 1152 856 con la misma versión "modo 1024" hay exactamente 8 pixeles de diferencia, he podido aislar el problema a la funcion document.body.clientWidth en IE6 que esta bugeada o que no arroja valores exactos.

Panino5001 · #2 (**permalink**) 14/06/2008, 14:46

Tanto en explorer 6 como en explorer 7, abriendo el último de tus enlaces, con este código escrito en la barra de direcciones obtengo el mismo resultado:
javascript:alert(document.body.clientWidth+'--'+document.documentElement.clientWidth);
El resultado es 998--998.

Remsankar · #3 (**permalink**) 14/06/2008, 15:07

Como lo comente el problema pasa a veces

A la aplicación se le hacen muchos test, en diferentes resoluciones de pantalla con ventana de favoritos abierta, con muchas o pocas barras de tareas, con aplicaciones que reducen el tamanhio del escritorio etc, en medio de esos test empezo a fallar pero solo aveces

Incluso aislar el problema es difícil, de todas maneras me diste una buena idea para probar con el javascript directo en la url
----

Probe y los valores son los mismos cuando se produce el error
javascript:alert(document.body.clientWidth+'--'+document.documentElement.clientWidth);
998--998

Panino5001 · #4 (**permalink**) 14/06/2008, 15:21

Bueno, otra cosa que podrías probar es cambiar el compatMode a ver qué ocurre, es decir, reemplazar el doctype que tenés (CSS1Compat) por <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (backCompat). Es sólo por probar, no tengo idea de qué puede pasar ;)

Remsankar · #5 (**permalink**) 14/06/2008, 17:15

El problema tambien existe en IE7

javascript:alert(document.body.clientWidth+'--'+document.documentElement.clientWidth);

990 - 990

Por alguna razón falla solo a veces por y siempre por 8 pixels

Remsankar · #6 (**permalink**) 16/06/2008, 16:29

Bueno agrego mas información del problema

La ventana en el modo 1024 (del software inmobiliario) siempre debe medir 998
La matemática del proceso funciona bien, sin embargo en un 5% de los casos y no se puede aislar el error de ninguna manera ya que después de muchos test lo que pensaba que tenia relaciona con el error no la tiene.

El error se produce en IE6 y en IE7 y tiene relacion con document.body.clientWidth que en algunos casos arroja 8 pixeles menos, es nada mas que eso, he pensado en tomar varias veces ese valor para obtener un porcentaje del valor correcto.

Cada vez amo mas a firefox...

Remsankar · #7 (**permalink**) 18/06/2008, 10:57

Bueno sigo con mi blog :P

Estoy probando con IE6 en la version 800*600 que mide 779 y se produjo el error
javascript:alert(document.body.clientWidth+'--'+document.documentElement.clientWidth);
El resultado es 771--779

O sea es document.body.clientWidth lo que falla
antes cuando comence este proyecto note que el margen en Win XP con los estilos de XP influia en este valor, no se por que pero al menos a esa conclusion llegue al vuelo.

Estoy trabajando para corregir el tamanhio cuando aparezca este error utilizando document.documentElement.clientWidth, pero esto lo tengo que hacer una vez que la ventana ya esta abierta por completo, escogere el valor mayor entre las dos.

Remsankar · #8 (**permalink**) 18/06/2008, 11:21

Bueno estoy probando con este javascript que lo cargo con body onload con el tamanhio correcto

Estoy integrando un poco mas los codigos por que entre tanto resize como que se empieza a ver mal

Código HTML:

function resizeDocumentTo(setw,seth){
	return window.resizeTo(setw,seth),window.resizeTo(setw*2-((typeof window.innerWidth ==
	'undefined')?document.documentElement.clientWidth:window.innerWidth),seth*2-((typeof window.innerHeight ==
	'undefined')?document.documentElement.clientHeight:window.innerHeight));
}

Panino5001 · #9 (**permalink**) 18/06/2008, 11:23

Podrías usar Math.max(document.body.clientWidth,document.docume ntElement.clientWidth);
para hacer el control.

Panino5001 · #10 (**permalink**) 18/06/2008, 11:24

Te dejo la función que uso para obtener las medidas de la página:

Código PHP:

  <script> 
function getWindowData(){ 
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal; 
    if (typeof window.innerWidth != 'undefined'){ 
        widthViewport= window.innerWidth; 
        heightViewport= window.innerHeight; 
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){ 
        widthViewport=document.documentElement.clientWidth; 
        heightViewport=document.documentElement.clientHeight; 
    }else{ 
        widthViewport= document.getElementsByTagName('body')[0].clientWidth; 
        heightViewport=document.getElementsByTagName('body')[0].clientHeight; 
    } 
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft); 
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop); 
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport); 
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport); 
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal]; 
} 
</script>

Remsankar · #11 (**permalink**) 18/06/2008, 11:31

Creo que encontre el problema :)

Estoy revisando los resultados de los test que tienen screenshot y todos tienen marcado el icono de maximizado, ese con dos cuadraditos :P creo que es por eso que cambian los 8PX seguramente la matematica de IE hace una relacion entre los tamanhios de las ventanas y claro se pierden 4 PX por cada perimetro de margen :P

Cuando la gente de Microsoft hara las cosas bien xD?

Remsankar · #12 (**permalink**) 18/06/2008, 11:35

Cita:

Iniciado por Panino5001

Te dejo la función que uso para obtener las medidas de la página:

Código PHP:

  <script> 
function getWindowData(){ 
    var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal; 
    if (typeof window.innerWidth != 'undefined'){ 
        widthViewport= window.innerWidth; 
        heightViewport= window.innerHeight; 
    }else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){ 
        widthViewport=document.documentElement.clientWidth; 
        heightViewport=document.documentElement.clientHeight; 
    }else{ 
        widthViewport= document.getElementsByTagName('body')[0].clientWidth; 
        heightViewport=document.getElementsByTagName('body')[0].clientHeight; 
    } 
    xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft); 
    yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop); 
    widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport); 
    heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport); 
    return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal]; 
} 
</script>

Que bueno que incluye los scrollbars

una consulta document.getElementsByTagName('body')[0].clientWidth; esto en que caso lo ocupas nunca lo habia visto en este tipo de funciones

Gracias, por las sugerencias y por los codigos :)

Panino5001 · #13 (**permalink**) 18/06/2008, 12:41

Es lo mismo que usar document.body