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

[laszlokenez]

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=(docum ent.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?

[David Mark]

On Aug 5, 4:01 pm, [e-mail] 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=(docum ent.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.

[Thomas 'PointedEars' Lahn]

la*********@gmail.com wrote:

Tested in IE7 and FF2. [...]
window.parent.frames["lft"].document.getElementById('r2').style.height=(docum ent.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, <f8*******************@news.demon.co.uk>