Main content of page bleeding onto footer? (only in IE7)

Question

On my page the main content is overlapping onto the footer. this is only happening in IE7. It works fine in ie8,ff,chrome. Any ideas on what the issue is?

Thanks.

Answer 1

IE9.js attempts to force IE 7 into respecting the height: 100% declarations which are actually wrong.

The height of your content should be set to auto instead of 100% because you don't want it to be 100% of height of the container, you want it to fit all your contents.

Here's the modifications to be made in main_red.css (I have only included the modified portions).

At line 26:

#content_container
{
  background:url(../assets/images/main-layout/logo_bg_red.gif);
  height:auto;
}
#inner_content_container
{
  background:url(../assets/images/main-layout/content_bg_red.gif) repeat-y center;
  height:auto;
}

At line 231:

#content
{
  padding-top:2px;
  height:auto;
  background-color:#FFFFFF;
}