CSS Tabs - contents of a div disappear in IE

[Randomgnome]

Hello all. Hopefully this is just some stupid thing I'm not noticing. Anyhow, I've got a simple UL which is serving as tabs for some content. The div that contains the content is aptly named "content" and has another dive next to it named "right." I want the two divs to be the same height and I don't really care if the right div has a bunch of empty space to accomplish this. The problem I'm having is that with just one of the tabs after you look at the tab, click away (to another tab) then come back the content is gone. This is only happening in IE and I know which lines of code are causing it but I can't find a way to fix it.

Here is the code:

Swaps the "active" tab and "inactive" tab and swaps out the new content via the display style attribute:

var active = 1;
var d = document;
function swapDiv(n) {
if (n != active) {
//tabs
d.getElementById("l"+n).className = "active"
d.getElementById("l"+active).className = "inactive";
//divs
d.getElementById("d"+n).style.display = "block";
d.getElementById("d"+active).style.display = "none";
//set active
active = n;
//even divs
evenDivs();
}
}

The evenDivs() function which is the problem area. As I said, I want the two divs to have the same height, but I would like the "content" div to be able to shrink or expand to fit the content.

function evenDivs() {
var l = d.getElementById("content");
var r = d.getElementById("right");
//reset div heights
l.style.height = "";
r.style.height = "";
//check and resize divs as necessary
if (parseInt(l.offsetHeight) > parseInt(r.offsetHeight)) {
r.style.height = (parseInt(l.offsetHeight)+23)+"px";
} else if (parseInt(l.offsetHeight) < parseInt(r.offsetHeight)); {
l.style.height = (parseInt(r.offsetHeight)-27)+"px";
}

And finally the HTML:

<div id="left">
 <ul class="nav">
 <li class="active" id="l1"><a onclick="swapDiv(1)">How this works</a></li>
 <li class="inactive" id="l2"><a onclick="swapDiv(2)">About Us</a></li>
 <li class="inactive" id="l3"><a onclick="swapDiv(3)">Testimonials</a></li>
 <li class="inactive" id="l4"><a onclick="swapDiv(4)">Contact Us</a></li>
 </ul>
 <div class="clear">&nbsp;</div>
 <div id="content">
 <div id="d1" class="content">
 <h3>How it works</h3>
 </div>
 <div id="d2" class="content" style="display:none;">
 <h3>About US</h3>
 </div>
 <div id="d3" class="content" style="display:none;">
 <h3>Testimonials</h3> 
 </div>
 <div id="d4" class="content" style="display:none;">
 <p>Contact Us Info</p>
 </div>
 </div>
 </div>

[edited by: Randomgnome at 1:01 am (utc) on June 10, 2009]

[Jesdisciple]

Do you have a page online that I can play with? I'm not sure it would help as I'm running Linux, but you never know.

Also, have you tried using straight CSS for this? Put both divs in another, give 'right' 100% height, and let 'content' determine what the height is. It might not work but, again, you never know.