Issues with jQuery height () with Internet Explorer 6

Question

I am using jQuery 1.3.2.

I am having problems getting the correct "height" in Internet Explorer 6. The height values ​​are correct in all other browsers.

I also use the wreize jQuery plugin .

Every time the browser loads, I run a method that resizes divs, iframes, based on the size of the browser. (There is a good reason for this.)

The return value is $ ('body'). height (), in IE 6, it seems to add 10 pixels after every resize of the browser.

Does 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 the DevExpress grid in the parent container. Ignore the fact that the code might be better. :)

Is there anything other than a “body” that I could use to get the right size? I tried the window object ($ (window) .height ()), but that doesn't seem to help much.

Any thoughts appreciated!

Answer 1

The problem you are facing is likely to be a hallmark of css. Due to floating issues, indentation and rendering differences between browsers.

try to get $ ("body"). innerHeight () and $ ("body"). externalHeight () and compare them in different browsers, you will get some general results. In the worst case, you may need to run a few if cases

Answer 2

Of course, here are a couple of ideas:

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

In addition, make sure that you type material on the page - for this you may need to spill things from the screen from time to time using the absolute position, and then show them on the screen again.

Another thing is that height () sometimes wins. Try .css ('height') to get the height [also faster] and remove the “px” for what is sometimes the more correct dimension.

Answer 3

or use the Dimensions plug in for jQuery, which gives you much more options for working and cross browser.

I use this plugin to draw lines from drag and drop to droppable, as I show here

Answer 4

 $('body').height(); // call this first iframeH = $('body').height(); //then try this