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

L

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=(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?
 
D

David Mark

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.
 
T

Thomas 'PointedEars' Lahn

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 said:
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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top