473,727 Members | 1,985 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Setting the height of two elements to match each other


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
Sep 26 '05 #1
12 2547
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

Sep 26 '05 #2
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
Sep 26 '05 #3
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
Sep 26 '05 #4


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/
Sep 26 '05 #5
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
Sep 26 '05 #6
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
Sep 26 '05 #7

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/
Sep 26 '05 #8
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
Sep 26 '05 #9


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/
Sep 26 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2850
by: MyndPhlyp | last post by:
I've been busting my head trying to figure this out for quite some time. With IE6 and NS7, no problems. I can simply code the HTML <img height="100%"> and be done with it. But NS4 and NS6 (and probably a couple of other IE and NS versions I can't get to right now) don't want to play nice unless I hard code the image height. (Yes, I'm one of those who insists on still coding for NS4.)
12
3225
by: Jacob Weber | last post by:
Hello. Is it possible to specify the exact space between two lines, measured from the baseline of the top line to the ascenders of the second line? I tried adding the space with padding-bottom, but it adds it below the descenders. So the actual space between lines is larger than I specified. Jacob
7
3284
by: nntp | last post by:
I am making two tables side by side. I need talble's each elements to match table two's. So the <td> in both must have the same heights. However. one talble's content's length is unknown under dynamic content is made. I tried to use <td height=xxx> but it does not force the height, but only set the minimal height. I want to know if there is a way to limit the height. or even the length of the content, so if it has 1000 charater long,...
9
2563
by: netclectic | last post by:
I'm dynamically adding options to a select list in javascript and i need to be able to set the height of the option, but setting style.height has not effect, I also tried style.pixelHeight but no joy. i'm doing something like this (: var selectControl = document.getElementById('MySelect'); var el = document.createElement('option'); el.value = "some value";
21
3984
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari. THanks very much, Michael
22
6966
by: Les Juby | last post by:
I am trying to adjust the window/table size of a website (www.worklaw.co.za) which has made use of DIV tags with its settings embedded in an CSS file. The client wants its width and height to adjust according to dynamic screen size, and I have been able to adjust the width to a percentage value which works fine. But if I try do the same with the height it shows some very strange results squashing the field to display about 3 lines.
1
1707
by: Roland Dick | last post by:
Hello, I have a problem here with an ASP.NET website. The pages are supposed to use a single master page which just contains some images and a menu control on the top, below that is the content placeholder. What I would like to achieve is to always see the master page elements (the images and the menu control). In other words, the content placeholder should display a scrollbar, not the whole page.
0
2226
by: erdavila | last post by:
With a code like this: <table> <tr> <td> <div style="height: 7px; overflow: hidden;"> Cell A </div> </td> <td>
19
3984
by: david.karr | last post by:
If in my CSS I set the "background-color" property on the "body" element, it only covers the background of the elements defined in the body, up to the current width and height of the page. However, if the current component set has a resulting small height, this leaves most of the page with the original background color (white). However, if I set the property on the "html" element instead, it does color the entire visible page, beyond the...
0
9260
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9185
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8103
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6703
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6011
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4521
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4786
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2639
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2158
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.