offsetHeight

**Martin Honnen** · Jul 23 '05, 05:37 PM

Re: offsetHeight

arkerpay2001@ya hoo.com wrote:

[color=blue]
> My program has divs that contain a single text node. I programatically
> set the myDiv.style.fon tSize = "8pt"; When I call myDiv.offsetHei ght,
> the number "14" is returned. Can someone explain to me what is going
> on?[/color]

offsetHeight is a computed value in pixels of the layout space used by
the element.
style.fontSize = "8pt" sets the CSS inline style for font-size to 8pt.

CSS spec for font-size is here:
<http://www.w3.org/TR/CSS2/fonts.html#font-size-props>

IE doc for offsetHeight is here:
<http://msdn.microsoft. com/library/default.asp?url =/workshop/author/dhtml/reference/properties/offsetheight.as p>

--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**arkerpay2001@yahoo.com** · Jul 23 '05, 05:37 PM

Re: offsetHeight

Thanks for the quick response. I looked at the IE doc, but it didn't
really answer my question. This is not an IE specific problem, Mozilla
does the exact same thing. I want to know where the extra six pixels
are coming from. There must be some kind of padding being put in, but
I looked at my code in the debugger and there was no property I could
find that would account for it.

I did check out the DOCTYPE declaration. I was using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Would a different DOCTYPE change how my program behaves?

**Evertjan.** · Jul 23 '05, 05:37 PM

Re: offsetHeight

wrote on 07 feb 2005 in comp.lang.javas cript:
[color=blue]
> My program has divs that contain a single text node. I programatically
> set the myDiv.style.fon tSize = "8pt"; When I call myDiv.offsetHei ght,
> the number "14" is returned. Can someone explain to me what is going
> on? I would like to be able to both predict the offsetHeight for
> various fontSizes and be able to reduce the offsetHeight.[/color]

That is correct. It includes vertical [font] white space
[and obtional padding and border]

<div style='font-size:30pt;borde r:black 1px solid;' id=oDiv1>
x
</div>
<BUTTON onclick="alert( oDiv1.offsetHei ght)">offset height 1</BUTTON>
<br>
<div style='font-size:30pt;borde r:black 1px solid;' id=oDiv2>
xx<br>xx<br>xx
</div>
<BUTTON onclick="alert( oDiv2.offsetHei ght)">offset height 2</BUTTON>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

**arkerpay2001@yahoo.com** · Jul 23 '05, 05:37 PM

Re: offsetHeight

Thanks for the response. I am aware that offsetHeight is returning
some sort of padding rather than the size of text.

What I want to do is to control this additional amount. My divs
contain a textNode and I am attempting to use the offsetHeight to
position my divs programmaticall y. The value returned by offsetHeight
is too large and leaves too much space between divs. Subtracting an
arbitrary amount from offsetHeight won't work either, because there is
a cascading effect on the screen from previous divs.

How can I effect the value that offsetHeight returns?

**Michael Winter** · Jul 23 '05, 05:37 PM

Re: offsetHeight

arkerpay2001@ya hoo.com wrote:
[color=blue]
> I want to know where the extra six pixels are coming from.[/color]

The two units pt and px clearly aren't the same, so equating them is
pointless (pardon the pun). Moreover, it is the line height that is
used to calculate the height of line boxes within block elements.
That, if not explicitly set, could be between 1.0 and 1.2 times the
font size (possibly even larger).

[snip]
[color=blue]
> Would a different DOCTYPE change how my program behaves?[/color]

It can. IE6 (and other browsers) in standards-mode should only return
the content height. In quirks-mode, they will also include the top and
bottom border and padding widths. IE5.5 and earlier will always
include these extra dimensions.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

**Martin Honnen** · Jul 23 '05, 05:37 PM

Re: offsetHeight

arkerpay2001@ya hoo.com wrote:
[color=blue]
> I looked at the IE doc, but it didn't
> really answer my question. This is not an IE specific problem, Mozilla
> does the exact same thing. I want to know where the extra six pixels
> are coming from. There must be some kind of padding being put in, but
> I looked at my code in the debugger and there was no property I could
> find that would account for it.[/color]

I have also posted a link to the CSS specification
(http://www.w3.org/TR/CSS2/), so try that or a CSS introduction telling
you about font-size, line-height, width, height, margin, padding, and
how the relate and interact to define the dimension of layout boxes.

--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**arkerpay2001@yahoo.com** · Jul 23 '05, 05:37 PM

Re: offsetHeight

Michael,

Yeah, I knew that pt and px weren't the same, but I saw that the
offsetHeight varied with the fontSize.

I explicitly set the lineHeight as you implied...and it worked! But
only in Mozilla. Fortunately, I am building for IE6.0 and up only, so
I need to figure out how to set it to standards mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

obviously isn't cutting it.

Thanks,

Jonathon

**arkerpay2001@yahoo.com** · Jul 23 '05, 05:37 PM

Re: offsetHeight

I appreciate the help, but the problem is still there.

To recap: A create a div (newDiv) and attach a textNode (myTextNode) to
my document.

newDiv.appendCh ild(textNode);
newDiv.style.fo ntSize = "8pt";
newDiv.style.li neHeight = "10px";

When I call newDiv.style.of fsetHeight later in the program, Mozilla
returns 10 as the value, IE6.0 returns 14.

I looked at all the newDiv.style, properties in the debugger. All of
the properties relating to margins have no assigned value.

Could someone please tell me where the 4 extra pixels are coming from
and how to turn them off?

Thanks,

Jonathon

**michael elias** · Jul 23 '05, 05:37 PM

Re: offsetHeight

I've had the same problem. My solution was to create an invisible SPAN
element, intialize it's style with the desired font settings and adding
it to the document body. Then i insert some text and read the
oSpan.offsetHei ght property. That gave me the correct height of the
text. This only worked with a span element, not a div.

**Grant Wagner** · Jul 23 '05, 05:38 PM

Re: offsetHeight

<arkerpay2001@y ahoo.com> wrote in message
news:1107801577 .983847.324470@ g14g2000cwa.goo glegroups.com.. .[color=blue]
>I appreciate the help, but the problem is still there.
>
> To recap: A create a div (newDiv) and attach a textNode (myTextNode)
> to
> my document.
>
> newDiv.appendCh ild(textNode);
> newDiv.style.fo ntSize = "8pt";
> newDiv.style.li neHeight = "10px";
>
> When I call newDiv.style.of fsetHeight later in the program, Mozilla
> returns 10 as the value, IE6.0 returns 14.
>
> I looked at all the newDiv.style, properties in the debugger. All of
> the properties relating to margins have no assigned value.
>
> Could someone please tell me where the 4 extra pixels are coming from
> and how to turn them off?[/color]

If you remove the setting of -lineHeight-, then both Firefox 1.0 and IE
6.0.2900 report the same value (14):

<div id="test"></div>
<script type="text/javascript">
var textNode = document.create TextNode("Hi");
var newDiv = document.getEle mentById('test' );
newDiv.appendCh ild(textNode);
newDiv.style.fo ntSize = "8pt";
// newDiv.style.li neHeight = "10px";
alert(newDiv.of fsetHeight);
</script>

So it's pretty evident that offsetHeight in IE is the offsetHeight of
the <div> disregarding the smaller -lineHeight- you are attempting to
set. Whether this is "correct" or not is a matter of debate. Personally
I think it's dangerous to set a font as a point size, then insist the
line height is a pixel height. Since different devices and platforms use
different DPI values it seems like this is a recipe for
non-cross-browser compatible code CSS.

So the "extra" 4 pixels aren't extra after all, they are part of the
height of the <div> when you put an 8pt font inside it.

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

offsetHeight

offsetHeight

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment