offsetHeight

A

arkerpay2001

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
 
M

Martin Honnen

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?
Click to expand...

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/d...r/dhtml/reference/properties/offsetheight.asp>
 
A

arkerpay2001

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?
 
E

Evertjan.

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.
Click to expand...

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

arkerpay2001

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?
 
M

Michael Winter

I want to know where the extra six pixels are coming from.
Click to expand...

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?
Click to expand...

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
 
M

Martin Honnen

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.
Click to expand...

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

arkerpay2001

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
 
A

arkerpay2001

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
 
M

michael elias

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

Grant Wagner

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?
Click to expand...

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.
 

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

Similar Threads

Setting onload and onresize events to window problem 0
How to paste n+1 every single time without copying new line from excel 3
How to paste n+1 every single time without copying new line from excel 0
Minimum Total Difficulty 0
Python3 string slicing 2
Now I've seen everything 12
More Accurate Element Measurement through jQuery 11
Spring Boot Request Mapping: How to Handle Multiple Request Paths in a Controller 1

Members online

Total: 58 (members: 2, guests: 56)
Robots: 434

Forum statistics

Threads
473,768
Messages
2,569,575
Members
45,053
Latest member
billing-software

Latest Threads

Top