Problem setting equal heights with jQuery in IE

Question

I have several of the same class of element on a page and am attempting to get them all to be the same height even though the content within varies slightly. I've put together a small function that yields results in both Firefox 2+ and Safari 3+ but apparently doesn't even register in IE 7. Here's what I'm using:

var tallestcopy = 0;
 $(".calloutL2Copy").each(
  function(index) {
   var tallest = $(this).height();
   if (tallest > tallestcopy) { 
    tallestcopy = tallest 
   }
  });
 $(".calloutL2Copy").css("height",tallestcopy);

Where the class ".calloutL2Copy" is applied to a div containing some text and the occasional image. I've also tried replacing the last line with:

$(".calloutL2Copy").height(tallestcopy);

Again, this works in Firefox and Safari but has no effect on the same divs in IE. I've verified that IE is getting the tallest pixel value correct, it's just not applying it to the siblings. Can anyone offer up some advice to get this thing working?

UPDATE:

Here's a sample of the code from the site where I'm trying to apply this technique. I didn't write the code (and am aware there's a serious case of div-itis), I'm only trying to fix CSS errors.

<div id="calloutL2Top">
<div class="calloutL2">
 <a href="#"><img class="calloutL2Img" alt="" src="something.jpg" width="217" height="81"></a>
 <div class="calloutL2Copy">
  <h3>Lorem Ipsum</h3>
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </div>
</div>

<div class="calloutL2">
 <a href="#"><img class="calloutL2Img" alt="" src="something.jpg" width="217" height="81"></a>
 <div class="calloutL2Copy">
  <h3>Lorem Ipsum</h3>
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </div>
</div></div>

UPDATE AGAIN:

I got the go ahead from the higher powers and I'm going to post the IP of the site directly do the pages in question so you can view firsthand what the problem is:

[url removed]

What I'm trying to fix are the series of boxes along the bottom of the main content area. Hopefully this is a little more helpful.

Answer 1

Have you tried

$(".calloutL2Copy").children().css("height",tallestcopy);

This should apply the css style to all the first level children of .calloutL2Copy.

Also, how exactly is your HTML nested? Another thing you could try would be to firebug Firefox as the script runs and see exactly what is getting your value. This might help you understand why IE isn't working. (If you have IE8, which has developer tools, you could also look at your HTML after the script and see exactly what has gotten the css and what hasn't).

Answer 2

I think you need to specify a unit...

$(".calloutL2Copy").css("height", tallestcopy + "px");

EDIT:

I think you are a victim of an IE bug. To fix it, I believe you'll need a clear div as the last child of your floated parent...

<div style="clear:both; font-size:1px; height:1px">&nbsp;</div>

EDIT 2:

View the source of your site. The first line needs to be the DOCTYPE, and you have a weird character there. Sup with that?!

Answer 3

I made a test page using HTML 4.01 Strict DOCTYPE and the exact code you provided in the question, and it works as intended in IE 6, 7, and 8 for me. Possibly there's a preset height or min/max-height in your CSS that's being inherited and causing conflicts, or another manipulation of the height in other JavaScript on your page?

http://www.lifford.org/exp/testcase/stackoverflow_IEheights.html