trouble with dynamic sizing of nodes

[blefler]

I am dynamically outputting a list of <dl> elements that i am displaying in a grid with css float. One of the elements contained in the <dl> is an image, which is a variable size. Here's the essential html structure of each <dl>.

<dl class="IDG_product">
  <dt>name</dt>
  <dd><a href="page.asp"><img src="img.jpg"></a></dd>
  <dd class="IDG_itemNumber">A230</dd>
  <dd class="IDG_productPrice">$4.50</dd>
</dl>

The variable height image is causing the height of the entire <dl> to vary, throwing off the float. To fix this I'm attempting to resize all the <dl>s to the height of the largest one in the set. This code below works fine in IE 6, but has no effect in Mozilla 1.6. I suspect IE is once again fooling me into thinking I've written compliant code by being too forgiving. What is the proper way to set a height/width of a node after retrieving it's offsetWidth/Height?

function sizeProductContainers()
{
   if (document.getElementById)
   {
      var maxHeight = 0;
      var maxWidth = 0;
      var navRoot = document.getElementById("IDG_productList");
      for (i=0; i<navRoot.childNodes.length; i++) 
      {
         node = navRoot.childNodes[i];
         if (node.className == "IDG_product")
         {
            if (node.offsetHeight > maxHeight)
               maxHeight = node.offsetHeight;
				
            if (node.offsetWidth > maxWidth)
               maxWidth = node.offsetWidth;
         }
      }
	
      for (i=0; i<navRoot.childNodes.length; i++) 
      {
         node = navRoot.childNodes[i];
         if (node.className == "IDG_product")
         {
            node.style.height = maxHeight;
            node.style.width = maxWidth;
         }			
      }
   }						
}

window.onload = sizeProductContainers;

[phalen180]

offsetHeight is not a standard property in the DOM.

Instead of using the offsetHeight of the child nodes (dt and dd), why not obtain a reference to the img node and check the height property of the image directly?

If you are outputting the img files from some sort of database on the server side, you could also obtain / store the image dimensions and specify height and width attributes as you output the lists.

[blefler]

Actually I was considering modifying the image margin instead of the <dl>... I think it would look better.

OffsetHeight aside (I see now the Dom Level 0 notation), why does setting the style.height on the <dl> not have any effect?

[phalen180]

I'd want to see the CSS you're using before I could comment on that.

I agree about setting the margin on the images instead of sizing the dl.

[blefler]

OK, I changed the code to modify the margins of the images instead of the DLs. Once again though, I have the same problem. The code works in IE 6, but not in Mozilla 1.6. Putting an alert in the function shows that it is being called during the onload. When the alert pops, I can see all the page elements correctly. Is there something I'm missing with Mozilla on the onload timing or something?

Here's the new function:

function sizeProductContainers()
{
	if (document.getElementById)
	{
		var maxHeight = 0;
		var maxWidth = 0;

		var imgNodes = document.getElementById("IDG_productList").getElementsByTagName("img");

		for (i=0; i<imgNodes.length; i++) 
		{
			node = imgNodes[i];
			if (node.height > maxHeight)
				maxHeight = node.height;
				
			if (node.width > maxWidth)
				maxWidth = node.width;				
		}
		
		for (i=0; i<imgNodes.length; i++) 
		{
			node = imgNodes[i];
			
			node.style.marginTop = (maxHeight - node.height) / 2 + Mod(maxHeight - node.height, 2);
			node.style.marginBottom = (maxHeight - node.height) / 2;
			node.style.marginLeft = (maxWidth - node.width) / 2 + Mod(maxWidth - node.width, 2);
			node.style.marginRight = (maxWidth - node.width) / 2;	
		}
	}						
}

function Mod(a, b) 
{
	return a - Math.floor(a / b) * b;
}