Getting actual height of an auto-heighted element in IE

Answer 1

As a completion for Marc's answer; There's an equal for jQuery's height() in Prototype:

$('col1').getDimensions().height //or .width ofcourse

And here's the docs: http://prototypejs.org/api/element/getDimensions

Update: I agree with crescentfresh below. Since I had the absolute same problem in the past, I've searched all possible methods to find the dimension properties but I failed as you will. please take a look at this:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

As you see, the function has been written to get the computed rendered current style of an element, but in our case even this method will fail, I guess. (worth a try)

So, as crescentfresh said, you have to find the problem in your CSS positioning method while not wasting your time seeking for a proper javascript function which could be able to do the magic. let's begin by removing that #content DIV and letting the #main to be the only wrapper of said columns, and then styling the remain to achieve the desired goal.

Answer 2

Artarad,
The above style i.e. css shows that you have not assigned height. Please try adding _height:auto in class which will look like

    .col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}

Basically, many browsers fail to recognize the height when assigned to a particular div or any element . In this case we use the above work arounds. I hope the above helps you.

Thanks,
Samiksha

Answer 3

From: Why would jquery return 0 for an offsetHeight when firebug says it's 34?

An element that is not actually taking part in the document render process has no dimensions, and will give an offsetWidth/Height of 0.

Both Prototype's getDimensions() and jQuery's height() read the offsetHeight or clientHeight properties, which you've tried and got 0. So somewhere in your code there must be something taking #col out of the rendering flow. That's all I can think of.

Answer 4

I don't know if it will work (without testing), but you could try jQuery and height(); this (in theory) gives the computed height. Worth a try...

Answer 5

I know this is an old question but I found a better answer than "Fix the css and forget the javascript".

I had the exast same problem and used .innerHeight() and it forced jQuery to calculate the height. For some reason .outerHeight() did not work whilst .innerHeight() solved the problem. Not sure if there is a similar method for prototype. You could look into the jQuery library and figure out how .innerHeight() works, and write your own.

Answer 6

Since IE wants to give you a hard time, you can give it some special attention and use a property that I believe it will recognize...

var height;
if(document.all) { //This means it is IE
  height = document.getElementById('col1').offsetHeight;
}
else {
  height = //Use what is working in other browsers now
}