Results 1 to 7 of 7

Thread: Dynamic Ajax Content: Page not resized properly

  1. #1
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Dynamic Ajax Content: Page not resized properly

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    #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;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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:

    Code:
    #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;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •