Compatibility Issues With Ie7?

I'm working on a site and having compatibility issues with IE7 (not working) vs IE8/Firefox (working). Can someone take a look at the following CSS and Screenshots and tell me why

Solution 1:

Start with adding a float:left to .landingTopInfo:

.landingTopInfo{ 
    float: left;
    padding-top:10px;
    text-align:left;
    width:50%;
    padding-left:15px;}

That'll get you in the ballpark.

For the .landingBottomInfo area, I'd foat the image and text items (.landingBottomInfoSectionText) left and set the left padding to fit.

Solution 2:

I think it has to do with your use of percentage-based widths on a floated element.

IIRC, IE7 rounds percentage-to-pixel calculations differently, which could result in the combined width being > 100%.

Solution 3:

Give landingTopInfo a padding-top: 10px;

Give landingTopInfoText a float: left; and change its padding-top to 10px

Give your "monitor," "compare," and "view" images each a float: left;

Solution 4:

remove the align center (aka align left on the landingMainContainter) and then floating the .landingTopInfo left.

#landingMainContainer
{
    padding-left:10px;
    margin: 0 auto; 
    **text-align: left;** 
    min-height: 400px; 
    width: 960px;
}

.landingTopInfo
{
    padding-top:10px;
    text-align:left;
    width:50%;
    padding-left:15px;
    **float:left;**
}