473,241 Members | 1,912 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

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

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?
Aug 5 '08 #1
2 3963
On Aug 5, 4:01 pm, laszloke...@gmail.com 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.
Aug 5 '08 #2
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>
Aug 5 '08 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: joeZ | last post by:
hi there! I'm just going crazy with this stuff I want to do I though was simple. I just want to locate an image (which is linkeable) below the bottom of a cell. I mean, if the cell is at...
6
by: chris | last post by:
is there a way by using html or javascript or anything else for that matter to detirmine the actual height or width of a table or cell for example if i only set the height to 100 and the data in...
7
by: Andrew Poulos | last post by:
I'm using the following code to create a small table with one column and two rows. An image goes into the first cell. //create table var t = document.createElement("TABLE"); t.style.position =...
10
by: arkerpay2001 | last post by:
Layout Gurus, My program has divs that contain a single text node. I programatically set the myDiv.style.fontSize = "8pt"; When I call myDiv.offsetHeight, the number "14" is returned. Can...
4
by: Dacian | last post by:
Hi, Im trying to place a javascript navigation menu inside a cell of a table in my page, the problem is that the constructor of the menu object has parameters for menu positioning and size and...
5
by: nivas.meda | last post by:
Hi, I have an excel sheet with a graph and cells.If i change the value in the excel cells the graph will reflect.Now i am going to implement this functionality in html page.I successfully saved...
1
by: Bart Lateur | last post by:
I'm trying to put a utton at the bottom (right) of a TD cell, irrespective of what else is in there. Usually, with other HTML block elements, we're told to use position: relative on the...
1
by: Manil | last post by:
I usually have no problem with Firefox, but here is a rare instance of IE displaying a table with image slices correctly and Firefox adding space where I seemingly have none. Is there anything I can...
1
by: bob2044 | last post by:
offsetHeight is not working in following code <script type="text/javascript"> function Coverdiv() { var standard=(document.compatMode=="CSS1Compat") ? document.documentElement:document.body;...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.