Dynamic Ajax Content: Page not resized properly

[Bitboy]

Title:
Dynamic Ajax content

Script URL:
http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Problem:

I have a website where I use the above script to load different content in a FAQ like manner. My problem is that in IE6/7 the content will scale fine but the footer will not relocate when the content are added (it's placed correct if the content fits within the browser window). So it's sitting where it was in the beginning and the content stretches beneath it.

Here is a link so you can see what I mean:

http://test.egetrae.dk/uk/oakandquality.php

What can I do to fix this? I'm still pretty new at CSS but working on getting better

Thanks!

[jscheuer1]

This has nothing to do with the script other than the fact that it resizes its content division. It is your layout. Redesign your page so as not to rely so heavily upon absolute positioning.

[Bitboy]

Well it works fine in Firefox, but IE throws it for a loop... Is there a quick fix for it? I'm fumbling in the dark regarding this. I might have to throw that script out and go for a more normal approach.

[jscheuer1]

A more normal approach might be good. I am not aware of any quick fix for this. Absolute positioning is tricky. If the content were statically positioned, changing the size of things would automatically push other content around. Absolute positioned elements technically require no layout space so, this is not the case for them. It works in FF as bottom:0 means at the bottom of the page and FF is kind enough to update that position as conditions change. However, it isn't required to do so by the specifications because the position is absolute and has no layout so, technically doesn't need to interact with other changes on the page. It is also tricky because with so much other absolute positioned content (not actually requiring layout space and therefore not technically adding to the height of the page), the bottom of the page position is somewhat a matter for debate to begin with.

[jscheuer1]

Here's something that won't fix it but, at least should make the appearance acceptable in IE 6 and 7 - change your wrapper styles to:

#wrapper {
	color: #FFFFFF;
	background-color: #efead8;
	width: 864px;
	height: 100%;
	height: auto;
	min-height: 100%;
	height: expression(Math.max(document.documentElement.clientHeight, 683)+'px');
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	z-index: 0;
}

[Bitboy]

Thanks a lot. I've tried it and it works better but there's still one of the links on that page that has the most content that f*cks it up

If I didn't have a requirement that the page has to fill out the window no matter what content was in it it would probably work great.

Ahh those designers and their demands

[jscheuer1]

I tried this out locally and it looked OK, try increasing the red number:

height: expression(Math.max(document.documentElement.clientHeight, 683)+'px');

Also, please note that I changed the order and value (removed !important) of the height declarations:

#wrapper {
	color: #FFFFFF;
	background-color: #efead8;
	width: 864px;
	height: 100%;
	height: auto;
	min-height: 100%;
	height: expression(Math.max(document.documentElement.clientHeight, 683)+'px');
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: left;
	z-index: 0;
}