Setting the height of two elements to match each other

[Andy Jeffries]

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

The code is as follows:

var newheight = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;

first.style.hei ght = newheight + "px";
second.style.he ight = newheight + "px";
So, I'm obviously doing something stupid, but can anyone enlighten me?
I tried writing to offsetHeight but the changes seemed to be ignored.

Cheers,
Andy

[Mick White]

Andy Jeffries wrote:

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

The code is as follows:

var newheight = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;
Try: alert(second.of fsetHeight);ale rt(first.offset Height);alert(n ewheight)
Mick

first.style.hei ght = newheight + "px";
second.style.he ight = newheight + "px";
So, I'm obviously doing something stupid, but can anyone enlighten me? I
tried writing to offsetHeight but the changes seemed to be ignored.

Cheers,
Andy

[Andy Jeffries]

Mick White wrote:

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it
works, but it makes both their heights larger than either of them (but
equal)

The code is as follows:

var newheight = (second.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;

Try: alert(second.of fsetHeight);ale rt(first.offset Height);alert(n ewheight)

OK, I get:

123
153
153

If I put the same alerts in after:

first.style.hei ght = newheight + "px";
second.style.he ight = newheight + "px";

I get:

162
162
153

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

Cheers,
Andy

[RobG]

Andy Jeffries wrote:

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

Asking this in a CSS forum, I'm sure they'll have a way to do this (or
at least make it look like it's happening) without any scripting.

Try:

comp.infosystem s.www.authoring.stylesheets
--
Rob

[Martin Honnen]

Andy Jeffries wrote:

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes
any padding or border space.

Thus if you have
height: 200px
padding: 2px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Andy Jeffries]

Martin Honnen wrote:

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes
any padding or border space.

Thus if you have
height: 200px
padding: 2px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

Cheers,
Andy

[Andy Jeffries]

Andy Jeffries wrote:

Martin Honnen wrote:

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the
CSS height defines the height of the content box and offsetHeight
includes any padding or border space.

Thus if you have
height: 200px
padding: 2px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

And the best bit is, that it doesn't work for one set (expands them by
9px) but my original code does work perfectly for another.

The code I put in is (to see if it worked before doing the same for
border*):

if (first.style.pa ddingTop) {
newheight = newheight - parseInt(first. style.paddingTo p);
}
if (first.style.pa ddingBottom) {
newheight = newheight - parseInt(first. style.paddingBo ttom);
}

Cheers,
Andy

[Martin Honnen]

Andy Jeffries wrote:

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

--

Martin Honnen
http://JavaScript.FAQTs.com/

[Andy Jeffries]

Martin Honnen wrote:

Andy Jeffries wrote:

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

http://www.andyjeffries.co.uk/temp/testcase/

Cheers,
Andy

[Martin Honnen]

Andy Jeffries wrote:

Andy Jeffries wrote:

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

http://www.andyjeffries.co.uk/temp/testcase/

So you are looking at the first inner <div> element in <div
class="first"> respectively <div class="second"> ?

DOM inspector says that line 221 in main.css gives
padding-top: 4px
padding-bottom: 4px
border-bottom-width: 1px
So that gives you the 9px difference, offsetHeigth is e.g. 128, computed
CSS height is 119px, if you now set the CSS height to 128 the padding
and border is added to the offsetHeight and you get the new offsetHeight
128 + 9 = 137.

That is exactly what I already told you, the CSS padding and/or border
is added to the CSS height/width when offsetWidth/offsetHeigth is computed.


--

Martin Honnen
http://JavaScript.FAQTs.com/