Kompatibilitätsprobleme mit IE7?

Question

Ich arbeite auf einer Website und habe Kompatibilitätsprobleme mit IE7 (funktioniert nicht) vs IE8/Firefox (funktioniert). Kann jemand sich die folgenden CSS und Screenshots anschauen und mir sagen, warum meine Seite in IE7 kaputt ist und was ich tun kann, um das Problem zu beheben?

Die Seite in Frage ist hier leben: CollectionTree

und mein CSS-Teil für diese Ansicht ist

#landingMainContainer 
{ 
    padding-left:10px; 
    margin: 0 auto; 
    text-align: center; 
    min-height: 400px; 
    width: 960px; 
} 
.landingTop 
{ 
    width:100%; 
    min-height:400px; 
    background:url('/Content/Images/BG_gray1_v2.png') no-repeat; 
} 
.landingTopInfo 
{ 
    padding-top:10px; 
    text-align:left; 
    width:50%; 
    padding-left:15px; 
} 
.landingTopInfoText 
{ 
    padding-left:20px; 
    padding-top:20px; 
    float:left; 
    color:#000000; 
    font-size:20px; 
} 
.landingTopInfoTextTitle 
{ 
    font-size:26px; 
    text-align:left; 
    padding-left:40px; 
    padding-top:10px; 
    clear:left; 
    color:#209202; 
} 
.landingTopInfoTextContents 
{ 
    font-size:12px; 
    padding-left:40px; 
    padding-top:10px; 
    clear:left; 
    color:#000000; 
} 
.landingTopInfoSignUpSection 
{ 
    clear:left; 
    float:left; 
    padding-left:40px; 
    padding-top:30px; 
} 
.landingTopInfoSignUpSectionText 
{ 
    padding-left:10px; 
    padding-top:10px; 
    float:left; 
    font-weight:normal; 
} 
.landingTopInfoImage 
{ 
    float:right; 
    background:url('/Content/Images/Dashboard_mockup.png') no-repeat; 
    width:40%; 
    height:290px; 
} 
.landingBottomInfo 
{ 
    width:100%; 
    float:left; 
    padding-left:20px; 
    color:#000000; 
} 
.landingBottomInfoSection 
{ 
    float:left; 
    width:30%; 
    text-align:left; 
    font-size:10px; 
    font-weight:normal; 
    padding-left:20px; 
} 
.landingBottomInfoSectionText 
{ 
    width:66%; 
    float:right; 
    text-align:left; 
} 
.landingBottomInfoSectionTextFirstLine 
{ 
    font-size:11px; 
    font-weight:bold; 
} 
.landingBottom 
{ 
    width:100%; 
    min-height:150px; 
} 
.landingBottomLeftSection 
{ 
    background:url('/Content/Images/BG_gray2_v2.png') no-repeat; 
    width:60%; 
    min-height:140px; 
    float:left; 
} 
.landingBottomLeftSectionTitle 
{ 
    font-weight:normal; 
    font-size:19px; 
    color:#FFFFFF; 
} 
.landingBottomLeftSectionImage 
{ 
    float:left; 
    padding-left:40px; 
    padding-top:10px; 
} 
.landingBottomLeftSectionText 
{ 
    padding-right:100px; 
    padding-top:10px; 
    float:right; 
} 
.landingBottomLeftSectionTextTitle 
{ 
    font-weight:bold; 
    color:#000000; 
    font-size:14px; 
} 
.landingBottomLeftSectionTextSentence 
{ 
    text-align:left; 
    color:#000000; 
    padding-top:10px; 
    padding-left:15px; 
    font-weight:normal; 
    font-size:10px;  
} 
.landingBottomRightSection 
{ 
    padding-top:7px; 
    width:35%; 
    min-height:140px; 
    float:right; 
} 
.landingBottomRightSectionTitle 
{ 
    text-align:left; 
    color:#209202; 
    font-weight:bold; 
} 
.landingBottomRightSectionText 
{ 
    width:70%; 
    color:#000000; 
    font-size:10px; 
    font-weight:normal; 
    padding-top:15px; 
    text-align:left; 
    float:left; 
} 
.landingBottomRightSectionTextLink 
{ 
    text-align:left; 
    padding-top:20px; 
} 
a.landingBottomRightSectionTextLink:link { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:active { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:visited { color: #3399FF; text-decoration: none; font-weight:bold; font-size:11px; } 
a.landingBottomRightSectionTextLink:hover { color: #3399FF; text-decoration: underline; font-weight:bold; font-size:11px; } 
.landingBottomRightSectionImage 
{ 
    width:30%; 
    float:right; 
} 

Hier ein Screenshot der Website ist korrekt in IE8 Anzeige:
Full Image

Hier ist die Website in IE7 vermasselt: Full Image

Was muss ich mit meinem CSS ändern, damit meine Seite in IE7 und IE8 "OK" aussieht?

Answer 1

Starten Sie einen Schwimmer mit dem Hinzufügen: von links nach .landingTopInfo:

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

Das wird Sie im Baseballstadion bekommen.

Für den .landingBottomInfo-Bereich würde ich die Bild- und Textelemente (.landingBottomInfoSectionText) nach links einblenden und den linken Abstand anpassen.

Answer 2

Ich denke, es hat mit Ihrer Verwendung von Prozent-basierten Breiten auf einem schwebenden Element zu tun.

IIRC, IE7 rundet die Berechnung von Prozent zu Pixel anders ab, was dazu führen könnte, dass die kombinierte Breite> 100% beträgt.

Answer 3

entfernen Sie die Ausrichtung Mitte (alias richten Sie links auf der landingMainContainter) und schweben dann die .landingTopInfo links.

#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;** 
} 

Answer 4

Geben landingTopInfo ein padding-top: 10px;

Geben landingTopInfoText ein float: left; und ändern ihre padding-top-10px

Geben Sie Ihren "Monitor", "Vergleichen" und "Ansicht" Bilder, die jeweils ein float: left;