Question

I’ve been trying to get the height of a DIV using “dojo.marginBox”, but I keep getting the wrong height in IE6.

Here’s part of my code:

<div id="outerDiv">
  <div id="hiderDiv" class="hider"></div>
  <div id="contentDiv1"></div>
  <div id="contentDiv2"></div>
  <div id="contentDiv3"></div>
</div>

The CSS for the “hiderDiv” looks something like this:

position: absolute; background-color: grey; opacity: 0.5; z-index: 1000;

What I expect it to do is this: the three content-DIVs will be filled dynamically with some content, so I don’t know which height the “outerDiv” will end up with.
The “innerDiv” is supposed to prevent users to click on any of the content (while still keeping the content “greyed out” but visible).

As the content-height changes dynamically on each page-load, I tried to retrieve the height of “outerDiv” after all content has been loaded and then apply that height to “hiderDiv” to cover all of the content:

dojo.style("hiderDiv", "height", dojo.marginBox("outerDiv").h + "px");

Which works, but (surprise!) not in IE6 …

I checked the height which is returned by “marginBox” and it’s way to high in IE6 (in fact it covers the height of “outerDiv” plus some other DIV that’s outside of “outerDiv” – I have no idea, why that happens).

What I found out: if I set the height of “outerDiv” to “0px” programmatically (using dojo.style) before filling the contentDivs, it works in IE6, but in FF the height will just stay 0px and won’t update after the content has been filled and so messing up my layout.

My workaround, that I don’t like, that’s why I’m writing this post:

  if (dojo.isIE == 6)
    dojo.style("outerDiv", "height", "0px");

If anybody has a different approach (apart from “drop IE6-support” :), I’d appreciate it.

Greetings,
Select0r

Answer 1

Well, as this question didn’t receive any attention for more than a year now, I’ll accept my workaround as the answer 🙂

  if (dojo.isIE == 6)
    dojo.style("outerDiv", "height", "0px");