jQuery height() problems with Internet Explorer 6

Question

I'm using jQuery 1.3.2.

I'm having trouble getting a correct "height" in Internet Explorer 6. Height values are correct in all other browsers.

I am also using wresize jQuery plugin.

Each time the browser loads, I fire a method that resizes divs, iframes based upon browser dimensions. (There's a good reason for this.)

The returned value of $('body').height(), in IE 6, seems to add 10 pixels after each resize of the browser.

Anyone else come across something like this?

var iframeH = 0, h = 0, groupH = 0, adjust = 0;

var tableH = $("#" + gridId + "_DXHeaderTable").parent().height();
var pagerH = $(".dxgvPagerBottomPanel").height();
var groupHeight = $(".dxgvGroupPanel").height();

if (pagerH == null)
    pagerH = 0;

if (groupHeight != null)
    groupH = groupHeight + pagerH;

iframeH = $('body').height();
h = (iframeH - (tableH + pagerH + groupH));

$('#' + gridId + "Panel").css("height", (h + "px"));
$("#" + gridId + "_DXMainTable").parent().css("height", (h + "px"));

This code is for setting the height of a DevExpress grid in it's parent container. Ignore the fact that the code could be better. :)

Is there something other than "body" that I could use to get me a correct size? I've tried the window object ($(window).height()), but that doesn't seem to help much.

Any thoughts are appreciated!

Answer 1

Sure, here's a couple of ideas:

With IE, and esp. older IE, I like to add a 1-10ms setTimeout statement around my height rendering functions -- it gives the dom and IE a chance to "relax"

Also, make sure you're stuff is visible on page -- for this, you may need to throw things off the screen temporarily using absolute position, and then reveal them onscreen again.

Another thing is that height() is sometimes wonky. Try .css('height') to retrieve heights [it's also faster] and remove the 'px' for what is sometimes a truer measurement.

Answer 2

The problem you're facing is more likely to be a css rendering difference. Because of floating problems, padding, and margin rendering differences between browsers.

try to get $("body").innerHeight() and $("body").outerHeight() and compare them in different browsers, you'll get some common results. In worst case you might need run some if cases

Answer 3

or use a Dimensions plug in for jQuery that gives you much more to work with and it's cross browser.

I use this plugin in order to draw lines from a draggable to a droppable like I show it here