In a javascript function i use document.body.clientHeight to get the height of the body. Now depending on the mode IE8 is in i.e quirks or standard, the value is different.
Example In quirks, document.body.clientHeight = 800px In standars, document.body.clientHeight = 650px
Hope i've made sense.
Please help.
Quirks mode and Standards mode return value is inconsistent. Since you tagged it as jQuery, just use
$('body').height() or $(window).height() depending on what you need... it fixes it internally so you don't have to type this:
jQuery.each([ "Height", "Width" ], function( i, name ) {
var type = name.toLowerCase();
// innerHeight and innerWidth
jQuery.fn["inner" + name] = function() {
return this[0] ?
jQuery.css( this[0], type, false, "padding" ) :
null;
};
// outerHeight and outerWidth
jQuery.fn["outer" + name] = function( margin ) {
return this[0] ?
jQuery.css( this[0], type, false, margin ? "margin" : "border" ) :
null;
};
jQuery.fn[ type ] = function( size ) {
// Get window width or height
var elem = this[0];
if ( !elem ) {
return size == null ? null : this;
}
if ( jQuery.isFunction( size ) ) {
return this.each(function( i ) {
var self = jQuery( this );
self[ type ]( size.call( this, i, self[ type ]() ) );
});
}
return ("scrollTo" in elem && elem.document) ? // does it walk and quack like a window?
// Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
elem.document.compatMode === "CSS1Compat" && elem.document.documentElement[ "client" + name ] ||
elem.document.body[ "client" + name ] :
// Get document width or height
(elem.nodeType === 9) ? // is it a document
// Either scroll[Width/Height] or offset[Width/Height], whichever is greater
Math.max(
elem.documentElement["client" + name],
elem.body["scroll" + name], elem.documentElement["scroll" + name],
elem.body["offset" + name], elem.documentElement["offset" + name]
) :
// Get or set width or height on the element
size === undefined ?
// Get width or height on the element
jQuery.css( elem, type ) :
// Set the width or height on the element (default to pixels if value is unitless)
this.css( type, typeof size === "string" ? size : size + "px" );
};
});
IE actually returns the correct values for clientHeight and clientWidth in both rendering modes - it actually renders the height / width of the boxes is different. See Quirks Mode for a demo of this.
In Quirks Mode, IE renders the width / height of padding and borders within the width / height of the box - in standards mode IE correctly renders the padding and borders in addition to the declared width of the box.
The best way to ensure consistency is to force IE into standards mode, by including this definition at the start of your file:
<!doctype html>