[jQuery] Internet Explorer and height()
I need some help with a problem with a div and getting its height. I
am wanting to design a layout that will work across across different
browser window sizes, so I want to make my main div into which my AJAX
content is injected defined by percentage widths and heights. For
example,
<div id="foo" style="position: relative; overflow: hidden; width:
70%;" height: 70%;"></div>
As jQuery only really works with pixels, I need to find the pixel
width and height of this div with the width () and height ()
functions. I can then calculate how big the content needs to be based
on the results (say I want to put the items in a grid that is four
across and four up, I define the width and height of each element I
insert into the container div as the container's width and height
divided by four).
The problem is, at first this div is empty. Its content is generated
dynamically by an AJAX routine that runs when the document loads. The
script determines how many items were in the XML and generates a HTMl
element to represent each item. The width and height of the contained
item is determined based on getting a number of them to fit across and
up inside the container in a grid pattern. This means in internet
explorer 6 the div behaves as if its height is auto, and because it
has no content it collapses down to a height of 0 px. The result iws
all the content elements also get a height of 0px.
I tried setting the body height to 100%, and this almost works in IE6,
but as the AJAX content loads and is injected into the container div
its height fluctuates (which looks quite ugly!) and it's finishing
height is ever so slightly different from the start height, leading to
some partial cutoff of the bottom row of elements or partial exposure
of the first row of elements that should be hidden by overslowing the
div.
In internet explorer 7 I get a different problem. The div displays
with the correct height regardless of whether or not it has content,
but the height() function seems to return a value that is totally
wrong, underestimating the actual height by more than half. This
makes my content elements a lot shorter than they should be and again
can lead to them being cut off incorrectly.
If I specify a hight in an explicit unig (pixels, ems, etc) then both
IE6 and 7 get the correct height and the content displays as
intended. When using the percentage height all my other test browsers
(Firefox 1.5, Opera 8 and 9, Safari 3) behave as intended.
The dimensions plugin doesnt' seem to help out here, and to be honest
I'm already using the fxQueue plugin, the interface plugin and the
blockUI plugin and I really don't want to overload the client with a
dozen scripts and mess up the download time for the page.
Does anyone know what's going on and what I can do about it? I really
don't want to have to fix explicitly on a size for my content div