jQuery/CSS height issues in IE/Chrome

Question

Hello again, I am back with more problems on my jQuery animated splash / website.

You can see the splash which is working in most browsers at voidsync.com/test. The problems I am encountering with IE are the html, body, or #CONTAINER not adjusting to longer content such as in the Services or About pages - you will see the footer does not properly move to the bottom.

Refreshing the browser after loading or completing the splash, the pages height adjusts properly to fit the content. Also this works in IE8 with JS disabled, so I know the problem is in there. (except in IE7 or IE8 compatibility mode, where the footer does not move down, period).

I can post code here if needed, but im not sure if that is necessary or possible as you may need to see all of the source code to get the right idea.

Bonus question

The Hosting page has similar problems in Chrome, where the content height does not appear to resize properly on that one page, or the footer becomes overlapped which may be due to the styling used on table elements.

Thanks in advance!

Answer 1

try adding a <div class="clear"></div> right before the footer

with the styles of:

.clear {height:1px; clear:both;}

Answer 2

So you are doing one of those 100% height thing right?

From my experience it only works with the following

html,body {height:100%;}
#wrapper {position: relative;min-height: 100%;}

In your css, you are relying on #CONTAINER to maintain the 100% height, but right now in IE it will always be 100% height of the viewport, not of the content.

What you can do is add a #wrapper around all your content, right after body, to help you maintain that 100% height, and position your footer accordingly, maybe with position:absolute; bottom: 0;