473,387 Members | 1,942 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,387 software developers and data experts.

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 12777


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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Danny | last post by:
Is there a way to find the size of a <div> element where the height either hasn't been specified or is set to 'auto'? document.getElementById('myId').style.height returns either nothing or...
3
by: marchaos | last post by:
I'm retreiving the offsetHeight of an element in firefox and IE, but in some circumstances, the height is bigger in IE that what it is in firefox, causing problems. Is there something that could be...
1
by: bensamuel | last post by:
hi .. I am using java scritp to generate rowws and columns for a table dynamically, but the offsetWidth and offsetHeigth methods return "0" for the dynamically created elements in IE6 .it works...
2
by: laszlokenez | last post by:
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...
2
dmjpro
by: dmjpro | last post by:
Have a look at my JavaScript code... function resizeFrameToFitScreen(){ var outerFrameSet = window.parent.document.getElementById('outerFrameSet'); ...
4
dmjpro
by: dmjpro | last post by:
HTML code <div id="dtls_DIV" style="background-color:#CCCCCC;border-style:solid;border-width:1px;border-color:#000000;display:none;position:absolute;height:180px;width:230px;overflow:auto"> ...
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: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.