Please help! IE8 is sometimes displaying my page correctly, sometimes not

I've looked all over this site and the rest of the internet, but can't figure out why this is happening. My page displays fine in all browsers but IE8 (though, technically, I haven't checked earlier versions of IE). Even in IE8, it sometimes displays correctly (which makes no sense to me).

Here's the page: http://www.thedudehatescancer.com/testsite/past-results.shtml

Sometimes the social network and footer information moves up the screen and overlays the bottom portion of the main page content, and sometimes it stays at开发者_Python百科 the bottom of the page, where it belongs.

style sheets are under the same root.

main: stylesheet.css

IE hacks: stylesheet-iehacks.css

I can't figure it out. My guess is I'm doing something stupid, but I wish I knew what it was. Any help would be very much appreciated!!

The main problem is that you are using display:inline-block.

The easy fix for this problems is to add zoom:1 to anything that is using inline-block.

This adds the hasLayout property in ie

For Example;

#networkswrap {
    background: url("images/bg-gray2.jpg") repeat scroll 0 0 transparent;
    border-bottom: 3px solid #989896;
    display: inline-block;
    height: 60px;
    overflow: visible;
    width: 100%;
    zoom:1
}

It looks like your site is using several CSS properties that have the potential to cause problems in IE.

It certainly has issues in IE7 and your use of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> should cause IE8 to use the IE7 rendering engine.

Initially, I thought it might be the hasLayout problem due to your use of display: inline-block. I tried implementing a fix for that but it made no difference.

I think the problem you are experiencing is due to your use of min-height. I tried applying a min-height hack and it seemed to work.

#mainwrap{
  min-height:600px;
  height:auto !important;
  height:600px;
}

Worthy site by the way; my mum had AML.

I hope this helps,

Mark