cell's offsetHeight not equal to cell's height?? firefox & IE

Discussion in 'Javascript' started by laszlokenez@gmail.com, Aug 5, 2008.

  1. Guest

    Tested in IE7 and FF2. I have 2 frames, 2 similar tables in them,
    similar CSS. (I have 1px cellpadding, and 1px border aroud the cells.

    From one frame I read the offsetHeight of a cell (getElementById), and
    set the height of the corresponding cell in the other frame. Here:

    window.parent.frames["lft"].document.getElementById('r2').style.height=(document.getElementById('r2'i).offsetHeight)
    + 'px';

    Everything works perfectly, cell gets resized, BUT then I read back
    the height of both cells, here:

    alert(document.getElementById('r2').offsetHeight + ' - ' +
    window.parent.frames["lft"].document.getElementById('r2').offsetHeight );

    In FireFox it returns 17 and 17 pixels, perfect. But IE7 returns 17
    and 20 pixels (17 for the original cell, 20 for the newly resized
    cell)! And they don't align! Why?

    Why do the browsers act differently? And how could I compensate the
    difference? Checking for IE and then substract 3 pixels doesn't feel
    like a safe solution.

    Any explanation or solution for this?
    , Aug 5, 2008
    #1
    1. Advertising

  2. David Mark Guest

    On Aug 5, 4:01 pm, wrote:
    > Tested in IE7 and FF2. I have 2 frames, 2 similar tables in them,
    > similar CSS. (I have 1px cellpadding, and 1px border aroud the cells.


    You have cellpadding="1" or padding:1px?

    >
    > From one frame I read the offsetHeight of a cell (getElementById), and
    > set the height of the corresponding cell in the other frame. Here:
    >
    > window.parent.frames["lft"].document.getElementById('r2').style.height=(document.getElementById('r2'i).offsetHeight)
    > + 'px';


    That assumes that the offsetHeight property is equal to the CSS
    height. With the standard box model, this will not be true.

    >
    > Everything works perfectly, cell gets resized, BUT then I read back
    > the height of both cells, here:
    >
    > alert(document.getElementById('r2').offsetHeight + ' - ' +
    > window.parent.frames["lft"].document.getElementById('r2').offsetHeight );
    >
    > In FireFox it returns 17 and 17 pixels, perfect. But IE7 returns 17
    > and 20 pixels (17 for the original cell, 20 for the newly resized
    > cell)! And they don't align! Why?


    Just a guess, as you did not post any code or markup, but is one or
    more of the pages rendered in quirks mode?

    >
    > Why do the browsers act differently? And how could I compensate the
    > difference? Checking for IE and then substract 3 pixels doesn't feel
    > like a safe solution.


    Good instinct.

    >
    > Any explanation or solution for this?


    Post the code.
    David Mark, Aug 5, 2008
    #2
    1. Advertising

  3. wrote:
    > Tested in IE7 and FF2. [...]
    > window.parent.frames["lft"].document.getElementById('r2').style.height=(document.getElementById('r2'i).offsetHeight)
    > + 'px';
    >
    > Everything works perfectly, cell gets resized, BUT then I read back
    > the height of both cells, here:
    >
    > alert(document.getElementById('r2').offsetHeight + ' - ' +
    > window.parent.frames["lft"].document.getElementById('r2').offsetHeight );
    >
    > In FireFox it returns 17 and 17 pixels, perfect. But IE7 returns 17
    > and 20 pixels (17 for the original cell, 20 for the newly resized
    > cell)! And they don't align! Why?


    The proprietary `offsetHeight' property value is not necessarily the same as
    the CSS `height' property value. When you set the CSS `height' property on
    the table cell in MSHTML, you define the client area height (not to be
    confused with clientHeight). The 3 additional pixels account for the
    padding around the client area and the borders around that. It can be
    tested easily without a directly scripted assignment to the CSS property (IE
    7.0.5730.11 CSS1Compat Mode, on WinXP SP3):

    javascript:document.body.innerHTML = '<table><tr><td style="height:4px;
    padding:2px; border:1px solid black;
    line-height:0">&nbsp;</td></tr></table>');
    window.alert(document.getElementsByTagName("td")[0].offsetHeight)

    (Or you can create a static test case that only accesses offsetHeight.)

    The alert window would shows 10 here, because

    offsetHeight := height + padding + borders = 4 + 2*2 + 2*1 = 10.

    (If line-height is not declared, it shows 22 for line-height:normal here; YMMV.)

    See also <http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx>.

    > Why do the browsers act differently?


    Gecko implements the standards-compliant W3C CSS Box Model; IE implements
    the proprietary MSHTML box model. Deprecated HTML formatting attributes and
    BackCompat/Quirks Mode may also interfere.

    > And how could I compensate the difference?


    Knowing what you are using, and computing it accordingly.


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
    Thomas 'PointedEars' Lahn, Aug 5, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nik Coughin
    Replies:
    9
    Views:
    610
    Nik Coughlin
    Nov 30, 2004
  2. Replies:
    0
    Views:
    548
  3. JC

    textbox height = containing cell height - x

    JC, Jul 29, 2004, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    175
    DujHoD
    Aug 2, 2004
  4. Replies:
    3
    Views:
    119
    Thomas 'PointedEars' Lahn
    Sep 18, 2007
  5. Replies:
    5
    Views:
    172
Loading...

Share This Page