469,271 Members | 1,012 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,271 developers. It's quick & easy.

offsetHeight

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

Thanks,

Jonathon

Jul 23 '05 #1
10 12579


ar**********@yahoo.com wrote:

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 someone explain to me what is going
on?


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

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2
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?

Jul 23 '05 #3
wrote on 07 feb 2005 in comp.lang.javascript:
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 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.


That is correct. It includes vertical [font] white space
[and obtional padding and border]
<div style='font-size:30pt;border:black 1px solid;' id=oDiv1>
x
</div>
<BUTTON onclick="alert(oDiv1.offsetHeight)">offset height 1</BUTTON>
<br>
<div style='font-size:30pt;border:black 1px solid;' id=oDiv2>
xx<br>xx<br>xx
</div>
<BUTTON onclick="alert(oDiv2.offsetHeight)">offset height 2</BUTTON>

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

Jul 23 '05 #4
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 programmatically. 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?

Jul 23 '05 #5
ar**********@yahoo.com wrote:
I want to know where the extra six pixels are coming from.
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]
Would a different DOCTYPE change how my program behaves?


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.
Jul 23 '05 #6


ar**********@yahoo.com wrote:
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 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
http://JavaScript.FAQTs.com/
Jul 23 '05 #7
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

Jul 23 '05 #8
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.appendChild(textNode);
newDiv.style.fontSize = "8pt";
newDiv.style.lineHeight = "10px";

When I call newDiv.style.offsetHeight 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

Jul 23 '05 #9
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.offsetHeight property. That gave me the correct height of the
text. This only worked with a span element, not a div.

Jul 23 '05 #10
<ar**********@yahoo.com> wrote in message
news:11**********************@g14g2000cwa.googlegr oups.com...
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.appendChild(textNode);
newDiv.style.fontSize = "8pt";
newDiv.style.lineHeight = "10px";

When I call newDiv.style.offsetHeight 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?


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.createTextNode("Hi");
var newDiv = document.getElementById('test');
newDiv.appendChild(textNode);
newDiv.style.fontSize = "8pt";
// newDiv.style.lineHeight = "10px";
alert(newDiv.offsetHeight);
</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 <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Danny | last post: by
dmjpro
2 posts views Thread by dmjpro | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.