clientHeight clientWidth returning different values on different browsers

Question

Properties document body clientHeight and document body clientWidth return different values on IE7  IE8 and Firefox   IE 8     document body clientHeight   704  document body clientWidth    1148   IE 7     document body clientHeight   704  document body clientWidth    1132   FireFox     document body clientHeight   620  document body clientWidth    1152   Why does this discrepancy exist  Are there any equivalent properties that are consistent across different browsers  IE8  IE7  Firefox  without using jQuery

User · Answer

The equivalent of offsetHeight and offsetWidth in jQuery is   window  width      window  height   It s not the clientHeight and clientWidth

User · Answer

What I did to fix my issue with clientHeight is to use the clientHight of the controls firstChild   I use IE 11 to print labels from a database and the clientHeight that worked in IE 8 was returning the height of 0 in IE 11   I found a property in that control that was listed as firstChild and that had a property if clientHeight and actually had the height I was looking for   So if your control is returning a clientSize of 0 take a look at the property of its firstChild   It helped me

User · Answer

This has to do with the browser s box model  Use something like jQuery or another JavaScript abstraction library to normalize the DOM model

User · Answer

Paul A is right about why the discrepancy exists but the solution offered by Ngm is wrong  in the sense of JQuery    The equivalent of clientHeight and clientWidth in jquery  1 3  is    window  width      window  height

User · Answer

i had a similar problem - firefox returned the correct value of obj clientHeight but ie did not- it returned 0  I changed it to obj offsetHeight and it worked  Seems there is some state that ie has for clientheight - that makes it iffy

User · Answer

Some more info for Browser window   http   www w3schools com js js window asp output print

User · Answer

It may be caused by IE s box model bug  To fix this  you can use the Box Model Hack

User · Answer

Element clientWidth  amp  Element clientHeight  return the height width of that element s content in addition any applicable padding    The jQuery implementation of these are     target  outerWidth    amp    target  outerHeight     clientWidth  amp   clientHeight are included in the CSSOM View Module specification which is currently in the working draft stage  While modern browsers have a consistent implementation of this specification  to insure consistent performance across legacy platforms  the jQuery implementation should still be used    Additional information    https   developer mozilla dot org en-US docs Web API Element clientWidth https   developer mozilla dot org en-US docs Web API Element clientHeight

User · Answer

The body element takes the available width  which is usually your browser viewport  As such  it will be different dimensions cross browser due to browser chrome borders  scrollbars  vertical space being take up by menus and whatnot     The fact that the heights also vary  also tells me you set the body html height to 100  through css since the height is usually dependant on elements inside the body    Unless you set the width of the body element to a fixed value through css or it s style property  it s dimensions will as a rule  always vary cross browsers versions and perhaps even depending on plugins you installed for the browser  Constant values in such a case is more an exception to the rule     When you invoke  clientWidth on other elements that do not take the automatic width of the browser viewport  it will always return the elements  width     padding   So a div with width 200 and a padding of 20 will have clientWidth   240  20 padding left and right    The main reason however  why one would invoke clientWidth  is exactly due to possible expected discrepancies in results  If you know you will get a constant width and the value is known  then invoking clientWidth is redundant

[javascript] clientHeight/clientWidth returning different values on different browsers

Examples related to javascript

Examples related to css

Examples related to firefox

Examples related to internet-explorer-8

Examples related to internet-explorer-7