CSS Overflow issue in IE7

Question

I'm working on a site for a client at the moment, and have it working correctly in all browsers except IE7 (IE6 and IE8 tested fine). It's a WordPress site and the theme is a child theme of the Thematic framework.

This is an example of a page that is not displayed correctly in IE7:

http://roynesbitt.credit-medics.co.uk/our-donors

The main content is forcing vertical and horizontal scrollbars on the main wrapper and is also not pushing the footer down, so that is appearing midway through it.

The irony is that this works correctly in IE6, it's just IE7 that is displaying this issue.

Any suggestions on how to fix are gratefully received.

Answer 1

IE is always a pain to work with. the easiest hack would be just using something like this:

<!--[if IE 7]>
    <link href="ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

more stuff here if you need a better understanding and what are the other options.

Answer 2

I think it's because floating #container div inside of #main. You can try clearfix. Add #main div clearfix class and try.

Answer 3

I've found the issue - I'd defined a conditional 'height' for IE7, as I thought it did not obey min-height. Removed this height property and all seems fine!

Thank you for the replies.